Невозможно привязать к данным в mat-таблице

Question

Issue

Я пытаюсь реализовать mat-table в Angular 7, но выдает следующую ошибку:

Ошибка: Ошибка: не удается найти другой поддерживающий объект '[объект Объект] 'типа' объект '.NgFor поддерживает только привязку к итерируемым объектам, таким как массивы.

Таблица, однако, правильно подбирает столбцы таблицы, просто не отображает никаких данных.Я попытался изменить dataSource на прямой массив моих предметов вместо использования 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>

Я получаю следующие данные из моего API:

{
    "rows": [
        {
            "id": 0,
            "type": "xxx",
            "provider": "xxx",
            "srvname": "xxx",
            "url": "xxx",
            "continent": "xxx",
            "country": "xxx",
            "flags": 0,
            "revision": 2,
            "updated_on": "2019-03-15T14:03:25",
            "audited_by": "",
            "audited_on": "1970-01-01T00:00:00",
            "audit_ipfs_file": ""
        }
    ],
    "more": false
}

, которые я затем сериализую в объект, который определяется следующим образом:

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

Где ApiRecord выглядит следующим образом:

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;
}

Answer 1

Я заметил, что вам не нужно переносить MatTableDataSource<> для ответа API,

  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
  }

В этом стеке пример переменная 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>