Angular如何在运行时更改垫子表的标签

Question

我有一个带分页的角度垫表，类似于他们的官方文档：https://material.angular.io/components/table/examples。如何在运行时更改标签的值？表已创建，但我希望在不重新创建表的情况下更改表标头中的值。有可能吗？例如，在下表中，我想更改标题的值，而不是使用"；符号"；拥有"；某事"；而不需要重新创建整个tabel。所以只是换个标签而已。

<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]"
showFirstLastButtons 
aria-label="Select page of periodic elements">
</mat-paginator>
</div>

Answer 1

只需在中使用一个变量

<th mat-header-cell *matHeaderCellDef>{{myVariable}}</th> 

英寸

myVariable="Symbol"  //define your variable
//and in any place
this.myVariable="Name Changed"

注意：一般来说，如果您没有；特殊掩模"；关于您的列，您可以定义一个"的数组；标题"；

headers=[{title:"position",column:"position"},
{title:"Name",column:"name"},
{title:"Weight ",column:"eight "}
...
]

并在你的.html 中循环这个数组

<ng-container *ngFor="let head of headers"; [matColumnDef]="head.column">
<th mat-header-cell *matHeaderCellDef> {{head.title}}</th>
<td mat-cell *matCellDef="let element"> {{element[head.column]}} </td>
</ng-container>