我正在使用 Angular 7，我有一个简单的组件角材料表 https://material.angular.io/components/table/overview。通过某些事件，例如单击鼠标，我希望能够更新现有表的数据和标题。
Before:
之后（目标）：
目前，我正在很好地更新数据。但是，我无法更新列的标题文本，除非我进行了相当做作的窗口超时调用。
这很难描述，所以堆栈闪电战仓库 https://stackblitz.com/edit/angular-hx9r7n?file=app%2Ftable-dynamic-columns-example.ts应该有帮助。在我链接到的“table-dynamic-columns.example.ts”文件中，我在“changeColumnHeader”按钮单击处理程序上尝试了两种不同的策略。看来，为了显示新的列标题标题，我需要首先清除表中显示的列，然后在超时时将它们正确设置回来。也许它不起作用，因为属性名称保持不变（即“id”）并且只有标题发生变化。
有谁知道更好的方法来使其正确更新？
也许它不起作用，因为属性名称保持不变（即“id”）并且只有标题发生变化。
这就是它不更新的原因，如此处所解释的comment https://github.com/angular/material2/issues/8361#issuecomment-345804954
在同一条评论中，有一个您可以使用的建议解决方案（添加 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 并且它正在工作here https://stackblitz.com/edit/angular-hx9r7n?file=app%2Ftable-dynamic-columns-example.ts
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
