Angular 的 Kendo 中未刷新网格数据

Posted 2023-05-07

【中文标题】Angular 的 Kendo 中未刷新网格数据

【英文标题】：Grid data is not refreshed in Kendo for Angular

【发布时间】：2019-01-06 03:09:35

【问题描述】：

In this plunk 我有一个 Kendo for Angular 网格，它使用 kendoGridBinding 指令绑定内存中的数据。

我需要做的是操纵数据模型并在网格中反映每个插入/更新/删除。

例如，在 plunk 中有一个按钮，如果您单击它，它将从 dataGrid 第一行中删除，但该更改不会反映在网格中。我在文档中找到了 notifydatachange 声明，但是它不起作用（正如您在 plunk 中看到的那样）。如何让网格刷新数据？

@Component(
    selector: 'my-app',
    template: `
        <kendo-grid #grid
            [kendoGridBinding]="gridData"
            [pageSize]="4"
            [pageable]="true">
            <kendo-grid-column field="CompanyName" [width]="140"></kendo-grid-column>
            <kendo-grid-column field="ContactName" [width]="120"></kendo-grid-column>
            <kendo-grid-column field="City" [width]="100"></kendo-grid-column>
            <kendo-grid-column field="ContactTitle" [width]="130"></kendo-grid-column>
        </kendo-grid>
        <button (click)="delFirst()">delete first row</button>
    `
)
export class AppComponent 

    @ViewChild('grid') grid: GridBinding;

    public gridData: any[] = customers;

    delFirst() 
      this.gridData.splice(0,1);
      this.grid.notifyDataChange();
      alert("First row deleted");
    

【参考方案1】：

如果您需要更新绑定指令，那么您应该设置一个新实例：

delFirst() 
    this.gridData.splice(0,1);
    this.gridData = this.gridData.slice(0);

或

delFirst() 
    this.gridData = this.gridData.slice(1);

否则，angular 不会检测到变化，也不会更新指令。

【参考方案2】：

您没有将数据分配回网格，请将其更改为，

delFirst() 
      this.gridData = this.gridData.slice(1);
 

DEMO