Предоставленный источник данных не соответствует массиву, Observable или DataSource

Question

Я пытаюсь реализовать Angular Материал таблицу, используя Angular 9, но я получаю следующую ошибку:

Provided data source did not match an array, Observable, or DataSource

Может кто-нибудь помочь мне понять, что такое вызывая ошибку здесь?

const ELEMENT_DATA: Pizza[] = [
  {id:1,description:'Muzza',small:300,big:350,tolde:450},
  {id:2,description:'Fug',small:300,big:350,tolde:450},
  {id:3,description:'Pal',small:300,big:350,tolde:450}
];

@Component({
  selector: 'app-pizzas',
  templateUrl: './pizzas.component.html',
  styleUrls: ['./pizzas.component.css']
})
export class PizzasComponent implements OnInit {

  pizzas=ELEMENT_DATA;

  displayedColumns: string[] = ['Variedad'];
}

  <table mat-table dataSource="pizzas" class="mat-elevation-z4">

    <ng-container matColumnDef="Variedad">
      <th mat-header-cell *matHeaderCellDef> Descripcion. </th>
      <td mat-cell *matCellDef="let pizza"> {{pizza.description}} </td>
    </ng-container>

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

Answer 1

Вы просто пропускаете квадратные скобки в html:

<table mat-table [dataSource]="pizzas" class="mat-elevation-z4">

Это означает, что не было интерполяции между переменной, которая была в ts, и переменной, которая принимает html.

Answer 2

В классе компонентов PizzasComponent, displayedColumns должен содержать имена свойств пицц, которые вы хотите отобразить в своей таблице.

displayedColumns: string[] = ['description'];

В шаблоне вам нужно определить привязка свойства для dataSource с использованием угловых скобок. Кроме того, matColumnDef должен соответствовать записи из displayedColumns.

<table mat-table [dataSource]="pizzas" class="mat-elevation-z4">

  <ng-container matColumnDef="description">
    <th mat-header-cell *matHeaderCellDef> Descripcion. </th>
    <td mat-cell *matCellDef="let pizza"> {{pizza.description}} </td>
  </ng-container>

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

Пожалуйста, посмотрите на это StackBlitz