首页 文章

Angular中的网格数据未在Kendo中刷新

提问于
浏览
2

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

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

例如,在插件中有一个按钮,如果单击它,它将从 dataGrid 第一行中删除,但该更改不会反映在网格中 . 我在文档中找到了一个notifydatachange语句,但它不起作用(正如你在插件中看到的那样) . 如何让网格刷新数据?

@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");
    }

}

2 回答

  • 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

相关问题