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

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
  };
}

在屏幕上，该行从 table 中删除，下一行被展开（我认为这是因为具有该索引的行曾经被展开），但已删除行的详细信息是仍然显示。这意味着现在 table 显示的行包含不正确的详细信息。显示的详细信息不属于此行。这永远不应该发生！

之前：

在第 2 行的详细信息中点击删除后：

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

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

谁能解释一下这是怎么回事，为什么这不像我预期的那样有效？我该怎么做才能解决这个问题？

Answer 1

演示的行为是由于网格默认重用其行和详细信息模板引起的。为了使用正确的信息重新创建它们，需要通过 trackBy 函数 return 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 Kendo 网格使删除的主行的详细信息可见

Angular Kendo Grid keeps details of removed master row visible

kendo-grid

angular

angular10