Таблица угловых материалов, как передать объект в displayColumns вместо массива

Question

Я строю стол в Angular8 с таблицей материалов.

Я использую массив строк для определения displayColumns и передаю каждое значение массива в директиву 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>

Вопрос: можно ли определить displayColumns как массив объектов, а не как массив строк?

Я хочу установить другое значение для отображаемого значения столбца, а также, возможно, установить некоторые другие свойства столбца условно.

Пример: Обратите внимание, что displayColumns - это массив объектов. Это не работает.

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 выполняет итерацию displayColumns, ожидая элемент массива, но получая объект. Есть ли способ исправить это или другой способ достижения этого требования?

Answer 1

Мне удалось добиться этого, создав отдельный объект для хранения имени столбца таблицы и отображаемого имени.

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

Отображаемый столбцы установлены в массив строк для каждого свойства столбца «имя».

  // 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 не требовалась для моего конкретного решения.