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

所展示的行為是由於網格默認重用其行和詳細信息模板所致。 為了使用正確的信息重新創建它們，需要通過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;