代码之家 › 专栏 › 技术社区 › Andrew

角度材质表-如何更新现有表的列标题?

angular-material-table angular-material typescript angular

Andrew · 技术社区 · 7 年前

我用的是Angular 7,我有一个简单的组件 Angular Material Table . 通过一些事件,比如鼠标单击,我希望能够更新现有表的数据和标题。

之前:

在(目标)之后:

目前,我正在很好地更新数据。但是,我无法更新列的标题文本,除非,也就是说,我执行了一个相当关键的窗口超时调用。

stackblitz repo 应该有帮助。在我链接的“table dynamic columns.example.ts”文件中,我在“changeColumnHeader”按钮单击处理程序中尝试了两种不同的策略。看起来,为了显示新的列标题,我需要首先清除表中显示的列,然后在超时时将它们正确地设置回原来的列。可能它不起作用,因为属性名称保持不变(即“id”),只有标题更改。

有人知道更好的方法来正确更新吗?

1 回复 | 直到 7 年前

GCSDC 7 年前

这就是它没有更新的原因,正如本文所解释的 comment

为此,包括 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文件上: