0

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

有人可以解释这里发生了什么以及为什么这不能按我的预期工作吗？我能做些什么来解决这个问题？

4

1 回答 1

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;

于 2020-09-15T08:49:32.040 回答