angular - Angular 2 Grid 数据绑定(bind)事件的 Kendo UI

Question

有没有一种方法可以捕获网格的 dataBound 事件，类似于我们在 Kendo UI 的 jQuery 版本中使用的事件。数据加载到网格后，我需要执行一个操作。

有一个 dataStateChange 事件，但在初始加载期间不会触发此事件。

目前，我正在使用超时功能来延迟执行，但这不是永久可靠的解决方案。

谢谢。

Answer 1

我认为为此使用 Angulars 内置工具就足够了。

首先建议为网格创建一个新组件:

网格组件.html

<kendo-grid [data]="tableData" #myTable>
  <kendo-grid-column field="ListItem" title="List Item">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{ dataItem.title }}
      </ng-template>  
  </kendo-grid-column>
</kendo-grid>

ngAfterViewInit Angular 的生命周期钩子(Hook)将在初始化后触发:

网格组件.ts

import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: `./table.component.html`,
})
export class TableComponent implements AfterViewInit  {
  @ViewChild('myTable') myTable: ElementRef;

  public ngAfterViewInit() {
    console.log('loaded', this.myTable);
  }

  public tableData = [
    { title: 'Number 1', id: 'one'},
    { title: 'Number 2', id: 'two'},
  ];
}

Here is a Stackblitz

如果数组的内容发生变化，我们会想要选择 AfterContentChecked，它会在每次类成员发生变化并且 detectChanges 被调用后运行，可以这么说，当内容在组件的生命周期内重新呈现时。