angular - 如何更改 Angular Material 表中的标题显示文本？

Question

我正在尝试遵循此处给出的 Angular Material 表-
https://material.angular.io/components/table/overview

我正在使用 ngFor显示 displayedColumns 中的所有可用列.所以对列名进行硬编码对我来说不是一个选择。

虽然我明白如何displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];是否可以选择要显示的列，如何在呈现表格时更改显示名称？我的表格中的一些名称很长，并且弄乱了表格渲染。

Answer 1

只需使用必要的数据创建一个定义，然后循环这些。我为你创建了一个stackblitz:https://stackblitz.com/edit/angular-ykrghm

以下是重要部分:

  <ng-container *ngFor="let def of tableDef">
<ng-container [matColumnDef]="def.key">
  <th mat-header-cell *matHeaderCellDef> {{def.header}} </th>
  <td [ngClass]="def.className" mat-cell *matCellDef="let element"> {{element[def.key]}} </td>
</ng-container>

——

  tableDef: Array<any> = [
    {
      key: 'position',
      header: 'Position',
      className: 'something'
    },    {
      key: 'name',
      header: 'Element Name',
      className: 'anElement'
    },    {
      key: 'weight',
      header: 'Weight',
      className: 'number'
    },    {
      key: 'symbol',
      header: 'A long text to display in header',
      className: 'something'
    },
  ]