Пользовательские заголовки заголовков дают дублированное имя определения столбца

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>

Answer 2

проблема в том, что вы

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

Я полагаю, вы можете сделать что-то вроде

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