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

Question

我有一个 angular 垫子 table，其分页就像在他们的官方文档中一样：https://material.angular.io/components/table/examples。我如何在运行时更改标签的值？ table 已创建，但我想更改 table 的 header 中的值而不重新创建 table。有没有可能？例如，在下面的 table 中，我想更改 header 的值，而不是让“Symbol”具有“something”而不重新创建整个表格。所以只是换个标签。

  <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>

在 .ts 中

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

注意：一般来说，如果您的列没有“特殊掩码”，您可以定义一个“headers”的数组，方法是

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>

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

Angular How to change the label of a mat table at runtime

html

javascript

css

angular-material

angular