标签: devextreme-angular

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

在文档中我找到了如何设置focus它说使用method focus()

但没有重点DxTextBoxComponent

如何设定焦点？

我的代码是：

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

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

HTML 是：

<dx-text-box #name>

没有效果

最后一个问题是，我无法从使用 [calculateCellValue]="function" 调用的函数访问 component.ts 的上下文，如果我使用 .bind(this) 传递它，DataGrids 交互功能将不再工作。

最后一个问题：如何防止 .bind(this) 以避免 DataGrid 的功能变得不起作用，或者确保我不需要执行 [calculateCellValue]="function.bind(this)" 来传递 DataGrid 的上下文组件到函数，并以其他方式使用正常的 [calculateCellValue]="function" 方法传递上下文。

代码如下所示：

我将 DxDataGrid 与 DxiColumns 一起使用，它调用组件函数：

<dxi-column dataField="exampleField" [calculateCellValue]="getExamplevalues"></dxi-column>

Angular 组件中的 getExamplevalues 函数如下所示：

getExampleValues(dataGridContext: any) {
    return this.exampleItems.length;
}

exampleItems 在组件的 ngOnInit 函数中启动：

  public example$: Subscription;
  public exampleItems: any;

  constructor(private exampleService: ExampleService) { }

  ngOnInit(): void {
    this.example$ = this.exampleService.getAll().subscribe(items => this.exampleItems = items);
  }

但是，在 getExamplevalues 函数中， this.exampleItems 始终未定义，因为该函数仅返回 DxDataGrid 的上下文，而不返回 Angular component.ts 上下文。

解决方案是改变：

<dxi-column dataField="exampleField" [calculateCellValue]="getExampleValues"></dxi-column>

=>

<dxi-column …