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

Question

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

之前：

之后（目标）：

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

这很难描述，所以stackblitz repo应该有所帮助。 我在'table-dynamic-columns.example.ts'文件中链接了这个文件，我在'changeColumnHeader'按钮点击处理程序中尝试了两种不同的策略。 看来为了显示我的新列标题标题，我需要首先清除表中显示的列，然后在超时时正确设置它们。 也许它不起作用，因为属性名称保持不变（即'id'），只有标题更改。

有没有人知道更好的方法来正确更新？

Answer 1

也许它不起作用，因为属性名称保持不变（即'id'），只有标题更改。

这就是它没有更新的原因，正如本评论所解释的那样

在同一评论中，您可以使用建议的解决方案（添加trackBy函数）。

为此， 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; }

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