我如何将 angular material table 值与它们的名称分开？

Question

我的 HTML 中有一个 angular material table，我使用可扩展 table 作为示例，因为它比其他类型更适合我。这个 table 还使用绑定 column/row 名称到名为“columnsToDisplay”的字符串数组。

<table mat-table
       [dataSource]="dataSource"
       multiTemplateDataRows
       class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

...

tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
      class="element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

但是，我想在此 table 中显示的属性与命名列的属性的名称不同。虽然命名列的属性如下所示：

  columnsToDisplay = [__('TBL.pipeSectionName'), __('TBL.pipeSectionLoss'), __('TBL.pipeSectionType'), __('TBL.pipeSectionLength')]

具有所需值的列是对象数组的一部分。无论列在此 table?

中如何命名，如何显示值

Answer 1

你可以这样做

columnsToDisplay2 = [

    { label: 'Weird name label', value: 'name' },
    { label: 'Weird weight label', value: 'weight' },
    { label: 'Weird symbol label', value: 'symbol' },
    { label: 'Weird position label', value: 'position' },
  ];

然后 html:

  <ng-container
    matColumnDef="{{column.value}}"
    *ngFor="let column of columnsToDisplay2"
  >
    <th mat-header-cell *matHeaderCellDef>{{column.label}}</th>
    <td mat-cell *matCellDef="let element">{{element[column.value]}}</td>
  </ng-container>

这是一个 stackblitz 运行 https://stackblitz.com/edit/angular-6b8rmt?file=src%2Fapp%2Ftable-expandable-rows-example.html

我如何将 angular material table 值与它们的名称分开？

How do I bind angular material table values apart from their names?

javascript

typescript

angular-material

angular