Angular 2 Grid dataBound 事件的 Kendo UI

Posted 2023-05-07

【中文标题】Angular 2 Grid dataBound 事件的 Kendo UI

【英文标题】：Kendo UI for Angular 2 Grid dataBound event

【发布时间】：2017-08-14 22:46:39

【问题描述】：

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

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

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

谢谢。

【参考方案1】：

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

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

grid.component.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>

Angular 的 ngAfterViewInit 生命周期钩子将在初始化后触发：

grid.component.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 之后运行，也就是说，当内容在生命周期中重新渲染时组件。

【讨论】：

很好的建议。谢谢。不过，我希望有更多面向组件的方法。由组件本身触发的事件。我刚刚检查了他们的最新版本，还没有 dataBound 事件。也许使用 Angular 的 ngAfterViewInit 可能是最好的选择。

遗憾的是，kendo 似乎选择了更多面向模板的组件方法，这可能是因为 kendo 本质上只是一个 jquery 插件。对于完整的基于组件的支持，您将不得不考虑有角材料。我遇到了同样的问题：我选择剑道来实施我们公司内的一个项目，但由于此类问题，我们正在从剑道转向角度材料。

此解决方案有效。模组，请标记为解决方案。

在 ngOnChanges 中处理数据变化可能是最好的，因为输入可能会改变并且 ngAfterViewInit 只被调用一次！

当输入改变时，改变检测将再次运行。不需要使用ngOnChanges，除非有特殊的事情要处理onPush