Как я могу отобразить данные в таблице угловых материалов?

Question

У меня проблема с отображением списка через угловой материал. Содержимое списка не отображается, пока заголовок.
Компонент:

export class CompaniesComponent implements OnInit {
  displayedColumns: string[] = ['id'];
  data: Company[] = [];
  isLoadingResults = true;

  constructor(private api: ApiService) { }

  ngOnInit() {
    this.api.getAllCompanies()
    .subscribe(res => {
      this.data = res;
      console.log(this.data);
      this.isLoadingResults = false;
    }, err => {
      console.log(err);
      this.isLoadingResults = false;
    });
  }

}

HTML:

<div class="example-container mat-elevation-z8">
  <div class="example-loading-shade"
       *ngIf="isLoadingResults">
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>
  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="data" class="example-table"
           matSort matSortActive="id" matSortDisableClear matSortDirection="asc">

      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>Id</th>
        <td mat-cell *matCellDef="let row">{{row.Id}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    </table>
  </div>
</div>

Результат:

формат элемента списка (json):

   {
        "id": 21,
        "companyName": "iErjVkVG",
        "companyDescription": "12345",
        "rating": 1,
        "companyValuation": 756,
        "salary": 3.22,
        "professionalGrowth": 2.56,
        "companyBenefits": 2.44,
        "communicationWithColleagues": 2.67,
        "educationSector": 3.11,
        "numberOfVotes": 0
    }

Может кто-то указать мне, где я делаю неправильно, потому что кажется, что проблема вообще не должна появляться
UPDATE
Класс компании:

export class Company {
    Id: number;
    CompanyName: string;
    CompanyDescription: string;
    Rating: number;
    CompanyValuation: number;
    Salary: number;
    ProfessionalGrowth: number;
    CompanyBenefits: number;
    CommunicationWithColleagues: number;
    EducationSector: number;
  }

data $ метод:

export class CompaniesComponent implements OnInit {

  displayedColumns: string[] = ['id'];//, 'companyName'];

  data$: Observable<Company[]>;
  isLoadingResults = true;


  constructor(private api: ApiService) { }

  ngOnInit() {

    this.data$ = this.api.getAllCompanies();
    console.log(this.data$);
  }

}

и html:

 <table mat-table #table [dataSource]="data$" class="example-table"
           matSort matSortActive="id" matSortDisableClear matSortDirection="asc">

Answer 1

Что касается материала Angular Документация Вам необходимо позвонить renderRows() после изменения массива данных.

Если предоставляется массив данных, таблица должна быть уведомлена, когда объекты массива добавляются, удаляются или перемещаются. Это можно сделать, вызвав функцию renderRows (), которая будет отображать diff с момента последней таблицы. Если ссылка на массив данных изменяется, таблица автоматически запускает обновление строк.

array способ

Так что либо попробуйте импортировать MatTable и получить ссылку на него

import {MatTable} from '@angular/material';

Используйте ViewChild, чтобы получить ссылку на таблицу

@ViewChild(MatTable) tableReference: MatTable<Company>;

contructor(...) {}

this.api.getAllCompanies().subscribe(res => {
  this.data = res;
  this.tableReference.renderRows();
}

и добавьте ссылку #table к табличному тегу, например <table mat-table #table>. При таком подходе вы также должны убедиться, что наблюдаемое завершено или вы от него отписались.

observable способ

Или, как мне кажется, лучше передать объект dataSource или наблюдаемый объект вместо массива.

При предоставлении наблюдаемого потока таблица автоматически запускает обновление, когда поток генерирует новый массив данных.

data$: Observable<Company[]>;

ngOnInit() {
  this.data$ = this.api.getAllCompanies().pipe(
    finalize(() => {
      this.isLoadingResults = false;
    })
  );
}

И в свой шаблон добавьте $.

<table mat-table [dataSource]="data$" ...>