问题描述
我使用的是Angular 7，我有一个带有 Angular材质表的简单组件.通过某些事件，例如单击鼠标，我希望能够更新该现有表的数据和标题.
I'm using Angular 7 and I have a simple component with an Angular Material Table. Through some event, say a mouse click, I want to be able to update both the data and the header of that existing table.
之前:
(目标)之后:
目前，我正在更新数据.但是，除非进行了相当随意的窗口超时调用，否则我无法获取列的标题文本进行更新.
Currently, I'm getting the data to update fine. However, I can't get the header text of the columns to update unless, that is, I do a fairly hokey window timeout call.
这很难描述，因此 stackblitz repo 应该会有所帮助.我链接到的"table-dynamic-columns.example.ts"文件中，我有两种不同的策略，可以在"changeColumnHeader"按钮单击处理程序上尝试.似乎为了显示新的列标题，我需要首先清除表中显示的列，然后在超时后将其正确设置回去.可能是因为属性名称保持不变(即"id")并且仅标题更改，所以它不起作用.
This is hard to describe, so a stackblitz repo should help. The in 'table-dynamic-columns.example.ts' file I've linked there, I have two different strategies that I try on the 'changeColumnHeader' button click handler. It appears that in order to get my new column header title to show up, I need to first clear out the displayed columns of the table, and then set them back properly in a timeout. Maybe it's not working because the property name stays the same (i.e. 'id') and only the title changes.
有人知道一种更好的方法来使其正确更新吗?
Does anyone know a better way to get this to update correctly?
推荐答案
这就是它未更新的原因，如对此评论
Thats the reason for it not updating, as explained on this comment
在同一条评论中，您可以使用一个建议的解决方案(添加trackBy函数).
On the same comment, there is a proposed solution that you may use (add a trackBy function).
为此，请在模板中包含trackBy:
For doing this, include trackBy on your template:
<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:
Include function trackByIndex on your component ts file:
trackByIndex(i) { return i; }
分叉了您提供的stackblitz，并且可以正常工作这里
Forked the stackblitz you provided and it is working here
这篇关于角材料表-如何更新现有表的列标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！