Angular Kendo Grid 使删除的主行的详细信息可见

Question

我在 angular 10.0.3 中使用 angular-kendo-grid（版本 6.14.5）和 kendoGridCellTemplate 来显示详细信息。

<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 行的详细信息被错误地保存在内存中。我可以做点什么来解决这个问题吗？

有人可以解释这里发生了什么以及为什么这不像我预期的那样工作吗？我该怎么做才能解决这个问题？

Answer 1

显示的行为是由于 Grid 默认重用其行和详细信息模板引起的。为了使用正确的信息重新创建它们，需要通过 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;