angular - 如何将焦点设置在 dxi 项目上

Question

我们在 Angular 6 应用程序中使用来自 DevExpress 的 DevExtreme-Components。我们有一个借助 dxi-item 元素构建的表单，如下所示：

<dx-form id="form" #manageOfferForm [formData]="getOfferToManageForView">
                <dxi-item class="dx-fieldset" itemType="group" caption="Projektstammdaten">
                        <dxi-item  dataField="description" [label]="{text: 'Description'}">
                        </dxi-item>
                 ...

现在我的问题是如何将焦点设置在控制器中的 dxi-item 编辑器元素上？

Answer 1

首先，在你的组件中创建一个方法，例如：

...
setFocus(e){
    e.component.focus();
}
...

接下来，尝试将其添加到编辑器的选项中：

 <dxi-item 
     dataField="Description"
     [label]="{text: 'Description'}"
     [editorOptions]="{onInitialized: setFocus}">
 </dxi-item>

注意：如果它不起作用，请尝试在 setFocus 方法中添加超时。

 ...
setFocus(e){
    setTimeout(() => {
        e.component.focus();
    }, 0);
}
...