角度材料表 - 如何更新现有表的列标题？

Question

我正在使用 Angular 7，我有一个带有Angular Material Table的简单组件。通过某些事件，例如单击鼠标，我希望能够更新该现有表的数据和表头。

前：

之后（目标）：

目前，我正在获取数据更新。但是，我无法更新列的标题文本，除非我做了一个相当糟糕的窗口超时调用。

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

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

Answer 1

也许它不起作用，因为属性名称保持不变（即“id”）并且只有标题发生了变化。

这就是它不更新的原因，如本评论所述

在同一个评论中，您可以使用一个建议的解决方案（添加 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>

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

trackByIndex(i) { return i; }

分叉了你提供的 stackblitz，它在这里工作