источник данных для таблицы mat не работает должным образом

Question

В моем проекте на основе Angular 8 создаются следующие файлы.

Mat-table вообще не показывает никаких данных. Он показывает пустую таблицу и ошибок нет.

Что мне здесь не хватает?

Angular компонент HTML содержимое

...
<table mat-table [dataSource]="dataSource" matSort matSortActive="id" matSortDirection="asc" matSortDisableClear>
...

Файл компонента TS

...
export class DealersListComponent implements OnInit, AfterViewInit {
...
ngOnInit() {
   this.loadDealers();
}

loadDealers() {
    const subscription: Subscription = this.dealerService.getDealers(this.result).subscribe(data => {
      this.result.fromJson(data as DealersPageResults);
      this.dealers = this.result.records as Dealer[];
      if (this.dealers && this.dealers.length) {
        this.isDataloaded = true;
        this.dataSource = this.dealers;
      }
      subscription.unsubscribe();
    });
}

dealerr.service.ts

import { Dealer } from '@shared/models/app.model';
...
type DealersPageResults = PageResults<Dealer, {}>;
...
export class DealerService {
...
  getDealers(result: DealersPageResults): Observable<DealersPageResults> {
    // this.logger.log(`getDealers() - API endpoint --> ${this.dealersUrl}`);
    return this.http
      .get<DealersPageResults>(this.dealersUrl, result.query());
  }
...
}

app.model.ts

export interface Dealer extends ModelType {
  name: string;
  country: string;
  countryCode: string;
  mbID: string; // in old app this is 'code' field
  city: string;
  website: string;
  phone: string;
  status: string;
  email: string;
  description?: string; // Description
  address: string;
  postalCode: string;
  contacts: Array<DealerContactPerson>;
  passengerCar: boolean;
  van: boolean;
  truck: boolean;
  bus: boolean;
  unimog: boolean;
  gssnID: string; // outletID in the old app
  companyID: string;
  createdBy?: string;
  lastUpdatedBy?: string;
  state?: DealerState;
  business?: string;
}

Answer 1

Поскольку таблица оптимизируется по производительности, она не будет автоматически проверять изменения в массиве данных. Вместо этого, когда объекты добавляются, удаляются или перемещаются в массив данных, вы можете инициировать обновление отображаемых строк таблицы, вызывая ее метод renderRows (). Источник

Angular компонент HTML содержание

...
<table mat-table #table [dataSource]="dataSource" matSort matSortActive="id" matSortDirection="asc" matSortDisableClear>
...

Компонент Fichier TS

...
export class DealersListComponent implements OnInit, AfterViewInit {
...

@ViewChild('table', {static: false}) table: MatTable<any>;

ngOnInit() {
   this.loadDealers();
}

loadDealers() {
    const subscription: Subscription = this.dealerService.getDealers(this.result).subscribe(data => {
      this.result.fromJson(data as DealersPageResults);
      this.dealers = this.result.records as Dealer[];
      if (this.dealers && this.dealers.length) {
        this.isDataloaded = true;
        this.dataSource = this.dealers;
        this.table.renderRows();
      }
      subscription.unsubscribe();
    });
}