角材料表-如何更新现有表的列标题? [英] Angular Material Table - How to update column header of an existing table?

问题描述

我使用的是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?

推荐答案

也许是行不通的，因为属性名称保持不变(即'id')，只有标题更改了.

Maybe it's not working because the property name stays the same (i.e. 'id') and only the title changes.

这就是它未更新的原因，如对此评论

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

这篇关于角材料表-如何更新现有表的列标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！