Отсутствуют определения для заголовка, нижнего колонтитула и строки; не может определить, какие столбцы должны быть отображены - Angular Таблица материалов

Question

Я использую Angular 9.0.4 с @ angular / material 9.1.3 и хочу показать базовую c таблицу материалов:

<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
  <!-- name -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element"> {{ element.name }} </td>
  </ng-container>

  <!-- code -->
  <ng-container matColumnDef="code">
    <th mat-header-cell *matHeaderCellDef>Code</th>
    <td mat-cell *matCellDef="let element"> {{ element.code }} </td>
  </ng-container>
</table>

Я импортировал в свой app.module .ts this:

import { MatTableModule } from '@angular/material/table';

@NgModule({
  imports: [
    MatTableModule,
  ],
})

В моем component.ts:

export class DevizaListComponent implements OnInit {
  devizas: DevizaInterface[] = [
    {
      name: 'dollar',
      code: 'USD' ,
    }
  ];

  constructor() { }

  ngOnInit() { }
}

Теперь я получаю это сообщение об ошибке в браузере:

Ошибка: отсутствует определения заголовка, нижнего колонтитула и строки; не может определить, какие столбцы должны быть отображены. в getTableMissingRowDefsError (таблица. js: 996) в MatTable.pu sh .. / node_modules/@angular/cdk/ivy_ngcc/fesm5/table.js.CdkTable.ngAfterContentChecked (табл. js: 1296)

В официальной документации ничего не сказано. Есть идеи?

Answer 1

В строке html отсутствует строка:

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

1. создать массив с определениями столбцов, как показано ниже в файле component.ts:

   columndefs : any[] = ['name','code'];

2. Обновите код таблицы следующим образом:

<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
          <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="code">
            <th mat-header-cell *matHeaderCellDef>Code</th>
            <td mat-cell *matCellDef="let element"> {{ element.code }} </td>
          </ng-container>
        
          <tr mat-header-row *matHeaderRowDef="columndefs"></tr>
          <tr mat-row *matRowDef="let row; columns: columndefs;"></tr>
        
        </table>

Вот демо: демо

Answer 2

Попробуйте!

<table mat-table [dataSource]="devizas" class="mat-elevation-z8">
 ....

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