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

Question

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

之前：

（目标）之后：

目前，我正在更新数据。但是，除非进行相当普通的窗口超时调用，否则我无法获取列的标题文本进行更新。

这很难描述，因此stackblitz repo应该会有所帮助。我已经链接到其中的“ table-dynamic-columns.example.ts”文件中，在“ changeColumnHeader”按钮单击处理程序上尝试了两种不同的策略。似乎为了显示新的列标题，我需要首先清除表中显示的列，然后在超时后将它们正确设置回去。可能是因为属性名称保持不变（即“ id”）并且仅标题更改，所以它不起作用。

有人知道一种更好的方法来使其正确更新吗？

Answer 1

  

也许是行不通的，因为属性名称保持不变（即“ id”）并且仅标题更改了。

这就是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>

包含函数trackByIndex在您的组件TS文件：

trackByIndex(i) { return i; }

分叉了您提供的堆叠闪电战，它正在here上工作