name.replace не является функцией в матричной таблице со столбцами Dynami c - PullRequest
Новая
       63

name.replace не является функцией в матричной таблице со столбцами Dynami c

0 голосов
/ 22 января 2020

Мне нужно использовать таблицу матов с динамическими c столбцами, но я получаю эту ошибку: 

> ERROR TypeError: name.replace is not a function
>     at MatColumnDef.set name [as name] (table.js:175)
>     at updateProp (core.js:32189)
>     at checkAndUpdateDirectiveInline (core.js:31867)
>     at checkAndUpdateNodeInline (core.js:44367)
>     at checkAndUpdateNode (core.js:44306)
>     at debugCheckAndUpdateNode (core.js:45328)
>     at debugCheckDirectivesFn (core.js:45271)
>     at Object.eval [as updateDirectives] (TableComponent.html:3)
>     at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
>     at checkAndUpdateView (core.js:44271)

В моем TS я объявил: 

tableConfigurations = {
    dataSource: [],
      columns: [{
        name: 'first'
      },
      {
        name: 'second'
      },
      {
        name: 'third'
      },
      {
        name: 'fourth'
      },
      {
        name: 'fifth'
      }]
  }

и в html у меня есть: 

<table mat-table [dataSource]="tableConfigurations.dataSource" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of tableConfigurations.columns">

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

  <tr mat-header-row *matHeaderRowDef="tableConfigurations.columns"></tr>
  <tr mat-row *matRowDef="let row; columns: tableConfigurations.columns;"></tr>

</table>

Это стек с текущим кодом, который у меня есть. Как вы можете видеть в консоли, там та же ошибка. Я не понимаю, чего мне не хватает.

1 Ответ

1 голос
/ 22 января 2020

Проблема была в 

columns: [{ name: 'first' }, {name: 'second'}, ... ]

Существует два подхода, которые вы можете использовать:

  1. Массив столбцов изменится на строковый массив, например:

    columns: ['first', 'second', ... ]

Angular столбцы отображения таблицы материалов должны быть строковыми массивами в порядке столбцов для анализа.

Добавить переменную для включения массива столбцов в строковый массив для ее правильного отображения

displayedColumns: any[] = this.tableConfigurations.columns.map(col => col.name);

Наконец:

Ваш html будет выглядеть так: 

<table mat-table [dataSource]="tableConfigurations.dataSource" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column.name" *ngFor="let column of tableConfigurations.columns;">
  <th mat-header-cell *matHeaderCellDef> {{column.name}}</th>
  <td mat-cell *matCellDef="let element"> {{element[column.name]}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

</table>

Рабочий пример

...