Angular 无法绑定到mat表中的数据 问题

我试图在Angular 7中实现一个

mat表

，但它给了我以下错误：

错误：找不到不同的支持对象“[object]” 类型为“对象”。NgFor仅支持绑定到Iterables，例如 数组

但是，该表确实正确地拾取了表中的列，只是没有显示任何数据。我已尝试将

数据源

更改为我的项目的直接数组，而不是使用

MatTableDataSource

，但随后我丢失了标题，数据仍然没有显示

如果有人能指出我做错了什么，我将不胜感激

---

更新： 它现在显示数据中的行数，但没有标题或任何数据：

---

代码 填充我的项目数组的代码如下所示：

  async ngOnInit() {
    // Load the items from the blockchain
    const items = await this.api.getApiRecords();
    this.items = new MatTableDataSource<ApiRecord>(items);
  }

<mat-table [dataSource]="items" matSort>

  <ng-container matColumnDef="type">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.type}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="provider">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Provider </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.provider}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="url">
    <mat-header-cell *matHeaderCellDef mat-sort-header> URL </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.url}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="country">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.country}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="updated_on">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Updated </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.updated_on}} </mat-cell>
  </ng-container>

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

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

export class ApiResponse {
  rows: ApiRecord[];
  more: boolean;
}

export class ApiRecord {
  id: number;
  type: string;
  provider: string;
  srvname: string;
  url: string;
  continent: string;
  country: string;
  flags: number;
  revision: number;
  updated_on: Date;
  audited_by: string;
  audited_on: Date;
  audit_ipfs_file: string;
}

然后将其序列化为一个对象，该对象定义如下：

  async ngOnInit() {
    // Load the items from the blockchain
    const items = await this.api.getApiRecords();
    this.items = new MatTableDataSource<ApiRecord>(items);
  }

<mat-table [dataSource]="items" matSort>

  <ng-container matColumnDef="type">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.type}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="provider">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Provider </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.provider}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="url">
    <mat-header-cell *matHeaderCellDef mat-sort-header> URL </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.url}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="country">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.country}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="updated_on">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Updated </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.updated_on}} </mat-cell>
  </ng-container>

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

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

export class ApiResponse {
  rows: ApiRecord[];
  more: boolean;
}

export class ApiRecord {
  id: number;
  type: string;
  provider: string;
  srvname: string;
  url: string;
  continent: string;
  country: string;
  flags: number;
  revision: number;
  updated_on: Date;
  audited_by: string;
  audited_on: Date;
  audit_ipfs_file: string;
}

其中，

ApiRecord

如下所示：

  async ngOnInit() {
    // Load the items from the blockchain
    const items = await this.api.getApiRecords();
    this.items = new MatTableDataSource<ApiRecord>(items);
  }

<mat-table [dataSource]="items" matSort>

  <ng-container matColumnDef="type">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.type}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="provider">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Provider </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.provider}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="url">
    <mat-header-cell *matHeaderCellDef mat-sort-header> URL </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.url}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="country">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.country}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="updated_on">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Updated </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.updated_on}} </mat-cell>
  </ng-container>

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

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

export class ApiResponse {
  rows: ApiRecord[];
  more: boolean;
}

export class ApiRecord {
  id: number;
  type: string;
  provider: string;
  srvname: string;
  url: string;
  continent: string;
  country: string;
  flags: number;
  revision: number;
  updated_on: Date;
  audited_by: string;
  audited_on: Date;
  audit_ipfs_file: string;
}

---

我注意到，API响应不需要包装

MatTableDataSource

  async ngOnInit() {
    // Load the items from the blockchain
    this.items = await this.api.getApiRecords(); //this will be work
    //this.items = new MatTableDataSource<ApiRecord>(items); << remove this
  }

async ngOnInit（）{
//从区块链加载项目
this.items=等待this.api.getApiRecords（）；//这将有效
//this.items=new MatTableDataSource，dataSource变量包含原始数据。
MatTableDataSource

更新：

这里有工作

下面的代码也已更新

  <mat-header-row *matHeaderRowDef="['type', 'provider', 'url', 'country', 'updated_on']"></mat-header-row>
  <mat-row *matRowDef="let row; columns: ['type', 'provider', 'url', 'country', 'updated_on']">
  </mat-row>


根据错误，您必须提供
SourceData
是一个数组，但您的数据类型是对象形式。请添加您的模板代码。我假设您正在将
项
绑定到
mat table
。如果是这样，它可能是
项。行
到bind添加了表代码。@Tachyon答案已更新。方法
getApiRecords
只返回一个项目数组，因此iterable@Tachyon答案已更新。我没有看到您的更新。不幸的是，它不起作用。仍然给我相同的答案error@Tachyon您的定义似乎需要更改，答案已更新。请确保您的mat表在服务响应后加载。抱歉-检查我的问题的更新n、 它现在显示正确的行数，但没有数据。