角度材料表获取列

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'}]

这样 Select 就可以看起来像这样。

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

正如您在上面看到的columnOptions ，我可以简单地对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>

试图走另一条路，从模板中查询列会变得混乱和缓慢。