Angular Material Table 如何将对象传递给 displayedColumns 而不是数组

Question

我正在使用 Material table 在 Angular8 中构建一个 table。

我正在使用一个字符串数组来定义 displayedColumns 并将每个数组值传递给 matColumnDef 指令。

这工作正常。

TS

displayedColumns: any[] = ['username', 'firstname', 'lastname'];

HTML

<div class="table-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let column of displayedColumns;" [matColumnDef]="column">
      <th mat-header-cell *matHeaderCellDef> {{ column }} </th>
      <td mat-cell *matCellDef="let element"> {{ element[column] }} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

问题：是否可以将 displayedColumns 定义为对象数组而不是字符串数组？

我想为列显示值设置一个不同的值，也可能有条件地设置一些其他列属性。

示例：请注意，displayedColumns 是一个对象数组。这不起作用。

TS

  displayedColumns: any[] = [
    { name: 'username', display: 'User Name' },
    { name: 'firstname', display: 'First Name' },
    { name: 'lastname', display: 'Last Name' }
  ];

HTML

<div class="table-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let column of displayedColumns;" [matColumnDef]="column.name">
      <th mat-header-cell *matHeaderCellDef> {{ column.display }} </th>
      <td mat-cell *matCellDef="let element"> {{ element[column.name] }} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

错误信息：

Could not find column with id "[object Object]".
    at getTableUnknownColumnError (table.js:890)
    at table.js:1973

我认为错误表明 mat-table 正在迭代 displayedColumns，需要一个数组元素，但得到一个对象。有没有解决这个问题的方法或其他方法来达到这个要求？

Answer 1

我能够通过创建一个单独的对象来存储 table 列名称和显示名称来实现这一点。

  // Table columns
  initColumns: any[] = [
    {
      name: 'username',
      display: 'User Name'
    },
    {
      name: 'firstname',
      display: 'First Name'
    },
    {
      name: 'Description',
      display: 'Description'
    }
  ];

displayedColumns 设置为每列的字符串数组 'name' 属性。

  // Displayed columns array of strings
  displayedColumns: any[] = this.initColumns.map(col => col.name);

ngFor 迭代 initColumns 对象数组并设置 matColumnDef，显示显示名称和行值。

<ng-container [matColumnDef]="column.name" *ngFor="let column of initColumns;">
<th mat-header-cell *matHeaderCellDef> {{column.display}}</th>
<td mat-cell *matCellDef="let element"> {{element[column.name]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

我从的回答中得到了灵感。请注意，我的特定解决方案不需要 trackbyindex 部分。

Angular Material Table 如何将对象传递给 displayedColumns 而不是数组

Angular Material Table how to pass object to displayedColumns instead of array

angular

angular-material-table