angular - 自定义标题标题提供重复的列定义名称

Question

我正在使用 Angular Material Table，我想更改表中的标题名称。

所以我为列创建了一个数组:

columnsToDisplay = [{"display": "name", "name": "Name"}, {"display": "something", "name": "Something here"}]

然后我想我可以通过以下方式解决这个问题:

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

但是后来我收到了这个错误:

Duplicate column definition name provided: "[object Object]".

Answer 1

我找到了您可以执行此操作的解决方案，例如:

  columns = [{'column': 'name', 'title': 'Name'}, {'column': 'environment', 'title': 'Environment'}]

在 html 中，您需要对此进行更改:

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