提供的数据源与数组、Observable 或 DataSource 不匹配

Question

我正在尝试使用 Angular 9 实现 Angular Material table，但出现以下错误：

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

在组件 class PizzasComponent 中，displayedColumns 应包含要在 table 中显示的比萨饼的属性名称.

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

在模板中，您需要使用尖括号为dataSource定义property binding。此外，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

Answer 2

您只是缺少 html:

上的方括号

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

这意味着 ts 中的变量与 html 中的变量之间没有插值。

提供的数据源与数组、Observable 或 DataSource 不匹配

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

angular-material

angular9