Question

我在Angular应用程序中使用dev extreme UI框架。

在文档中，我发现了如何设置focus，它说使用method focus()

但是DxTextBoxComponent

没有重点

如何设置焦点？

我的代码是：

@ViewChild("name", { static: false }) public inputName: DxTextBoxComponent;

  ngAfterViewInit() {
    this.inputName.instance.focus();
  }

HTML是：

<dx-text-box #name>

没有效果

Answer 1

您的代码看起来正确。确保已导入所有必需的依赖项和DxTextBoxComponent，并且页面上只有一个具有此标识符的TextBox。该代码在CodeSandbox中不起作用（我认为此问题特定于CodeSanbox），但在本地项目和DevExtreme Widget Gallery中均有效。在其中添加以下代码

app.component.html

<dx-text-box #name value="John Smith"></dx-text-box>

app.component.ts

//additional imports
import { ViewChild } from '@angular/core';
import { DxTextBoxComponent } from 'devextreme-angular';

//replace the AppComponent with this code
export class AppComponent {
    @ViewChild("name", { static: false }) inputName: DxTextBoxComponent;

    ngAfterViewInit() {
        this.inputName.instance.focus();
    }
}

我录制了screencast。

如果ViewChild指令不起作用，则可以使用onInitialized事件处理程序获取组件的实例：

app.component.html

<dx-text-box #name (onInitialized)="getInstance($event)"></dx-text-box>

app.component.ts

export class AppComponent {
   inputName: any;

   getInstance(e) {
      this.inputName = e.component;
   }

   ngAfterViewInit() {
      this.inputName.focus();
   }
}

我也在本地和他们的Widget Gallery中发短信给这种方法。它不需要任何其他导入，并且可以正常工作。

Answer 2

您缺少实例。 DxTextBoxComponent的实例是dxTextBox，该实例具有focus（）方法。

ngAfterViewInit() {
    this.inputName.instance.instance.focus();
  }

缺点是Angular编译器根本不喜欢这样，所以如果您找到解决方法，请回到我身边：p

Answer 3

您可以尝试这样

TS

fig, axs = plt.subplots(3, 4)
for i in range(nrows):
    for j in range(ncols):

        axs[i+1, j+1].plot(building_id_dfs[i + j].index,  building_id_dfs[i + j], label = str(building_ids[i + j]))
    plt.legend()

No handles with labels found to put in legend.

---------------------------------------------------------------------------
IndexError                                Traceback (most recent call last)
<ipython-input-93-2cc113304bb7> in <module>
      3     for j in range(ncols):
      4 
----> 5         axs[i+1, j+1].plot(building_id_dfs[i + j].index,  building_id_dfs[i + j], label = str(building_ids[i + j]))
      6     plt.legend()

IndexError: index 3 is out of bounds for axis 0 with size 3

HTML

@ViewChild('search', { static: false }) public searchTextBox: DxTextBoxComponent;

someFunction() {
this.searchTextBox.instance.focus();
}

Answer 4

以防万一。这是 React 的工作代码：

let theInstance;
const getInstance = (e) => {
    theInstance = e.component;
}
const someFunction = () => {
    theInstance.focus(); 
}
<TextBox onInitialized={e => getInstance(e)} />

如何将焦点设置到dx文本框？

4 个答案: