Question

我有一个很大的表（很多列）。这就是为什么我要允许用户更改displayColumns。我的想法是将所有列都放在MultiSelect中。为了使其正常工作，我需要知道所有columnId才能将它们用作select-options中的值。为了使外观更好看，我需要知道列标题单元格的内容，以将它们用作选择选项的显示文本。

这就是表格的样子。

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进行硬编码。但是，由于MatTable中存在所有必需的数据，所以我想知道是否有任何方法可以从Table中获取选项。我一直在向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>

尝试采用另一种方法，并从模板中查询列会比较混乱且较慢。

角材料表获取列

1 个答案: