角剑道网格使移除的主行的细节保持可见

问题描述

我正在使用带有kendoGridCellTemplate的angular 10.0.3中的angular-kendo-grid（版本6.14.5）来显示细节。

<kendo-grid #KendoGrid
 [data]="gridSettings.gridView"
 (...)
>
 <kendo-grid-column
   field="code"
   title="code"
 >
 (...)
 <ng-template kendoGridCellTemplate let-dataItem>
    <details-component 
      [id]="dataItem.Id"
      (onDelete)="onDelete($event)">
    </details-component>
 </ng-template>
 (...)
</kendo-grid>

详细信息组件具有一个“删除”按钮，该按钮应删除该主行的所有详细信息。当按下按钮时，“ onDelete（）”事件会发回给masterComponent，并且masterComponent将从其数据源中删除该行。

onDelete(deletedRowId: number): void {
   this.rows = this.rows.filter(r => r.id !== deletedRowId.id);

   this.loadGridResult();
}

loadGridResult(): void {
  this.gridSettings.gridView = {
    data: orderBy(this.rows,this.gridSettings.sort)
      .slice(this.gridSettings.skip,this.gridSettings.skip + this.gridSettings.pageSize),total: this.rows.length
  };
}

在屏幕上，该行已从表中删除，并且下一行被扩展了（我假设发生这种情况，因为具有该索引的行曾经被扩展过），但是仍然显示了已删除行的详细信息。这意味着现在该表显示的行包含错误的详细信息。显示的详细信息不属于此行。这永远不会发生！

之前：

在第2行的详细信息中单击“删除”后，

如果再次单击“删除”按钮，则该页面将在尝试删除已删除的内容时崩溃。如果折叠了包含现在已损坏的详细信息的行，然后再次展开，则会加载正确的详细信息。

似乎第2行的详细信息未正确保存在内存中或其他内容中。我可以做些什么来解决这个问题吗？

有人可以解释这里发生了什么，为什么这不能按我预期的那样进行？我该怎么做才能解决此问题？

解决方法

显示的行为是由于网格默认情况下重用其行和详细信息模板引起的。为了使用正确的信息重新创建它们，将需要通过trackBy函数返回dataItem。

请检查下面的示例演示此方法：

https://stackblitz.com/edit/angular-nuajzf-sbdahs?file=app%2Fapp.component.ts

    <kendo-grid
         [trackBy]="trackBy"
    >
    </kendo-grid>

... public trackBy =（idx，item）=> item;

angular angular10 kendo-grid