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

问题出在你的

<td mat-cell *matCellDef="let element"> {{element[column]}} </td>

我想你可以给喜欢的人

    <td mat-cell *matCellDef="let element"> 
        {{element[column.name]}} //<!--show the property "column.name"
    </td>

Answer 2

我找到了您可以执行的解决方案，例如：

  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>

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

2 个答案: