Angular Таблица материалов получить столбцы

Question

У меня довольно большая таблица (много столбцов). Вот почему я хочу разрешить пользователю изменять отображаемые столбцы. Моя идея состоит в том, чтобы поместить все столбцы в MultiSelect. Чтобы это работало, мне нужно знать все columnIds, чтобы использовать их в качестве значений в опциях выбора. Чтобы это выглядело хорошо, мне нужно знать содержимое ячеек заголовков столбцов, чтобы использовать их в качестве отображаемого текста опций выбора.

Вот как выглядит таблица.

columns = new FormControl(['name','custom1']);

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <ng-container matColumnDef="custom1">
    <th mat-header-cell *matHeaderCellDef>My Custom Column</th>
    <td mat-cell *matCellDef="let element"> {{element.custom1}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columns.value"></tr>
  <tr mat-row *matRowDef="let row; columns: columns.value;"></tr>
</table>

Поэтому данные, которые мне нужны для опций, должны выглядеть следующим образом.

const columnOptions = [{columnId: 'name', columnHeader: 'Name'},{columnId: 'custom1', columnHeader: 'My Custom Column'}]

Таким образом, выбор может выглядеть следующим образом.

  <mat-select [formControl]="columns" multiple>
    <mat-option *ngFor="let col of columnOptions" [value]="col.columnId">{{col.columnHeader}}</mat-option>
  </mat-select>

Я мог бы просто жестко закодируйте columnOptions, как вы видели выше. Но так как все необходимые данные присутствуют в MatTable, мне было интересно, есть ли способ получить параметры из таблицы. Я просил Google о помощи, в MatTable много чего, но ничего не объясняет, как получить метаинформацию о столбцах.

Answer 1

Я бы порекомендовал определить columnOptions в компоненте, как у вас, а затем использовать его для динамического создания столбцов в шаблоне. Таким образом, он определен только в одном месте.

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

Попытка go другим способом, и запрос столбцов из шаблона будет грязным и медленным.