Angular Material Table - 如何更新现有表格的列标题？

Question

我使用的是 Angular 7，我有一个带有 Angular Material Table 的简单组件.通过某些事件，比如单击鼠标，我希望能够更新现有表格的数据和标题。

之前:

(目标)之后:

目前，我正在获取要更新的数据。但是，我无法获取要更新的列的标题文本，除非，也就是说，我执行了一个相当矫揉造作的窗口超时调用。

这很难描述，所以 stackblitz repo应该有帮助。在我链接到那里的“table-dynamic-columns.example.ts”文件中，我有两种不同的策略可以尝试“changeColumnHeader”按钮单击处理程序。看来，为了让我的新列标题显示出来，我需要先清除表格中显示的列，然后在超时时将它们正确设置回来。也许它不起作用，因为属性名称保持不变(即“id”)并且只有标题发生变化。

有谁知道更好的方法来正确更新它？

Answer 1

Maybe it's not working because the property name stays the same (i.e. 'id') and only the title changes.

这就是它不更新的原因，如本 comment 中所述

在同一条评论中，有一个建议的解决方案可供您使用(添加 trackBy 函数)。

为此，请在您的模板中包含 trackBy:

<ng-container [matColumnDef]="config.property" *ngFor="let config of configs; trackBy: trackByIndex">
<th mat-header-cell *matHeaderCellDef> {{config.name}} </th>
<td mat-cell *matCellDef="let element"> {{element[config.property]}} </td>

在组件 ts 文件中包含函数 trackByIndex:

trackByIndex(i) { return i; }

fork 了您提供的 stackblitz，它正在运行 here