Angular - таблица матов, не показывающая никаких данных из API

Question

Моя таблица не показывает никаких данных, вызов API успешно выполняется в инструментах разработчика моего браузера.

В консоли нет ошибок.

Мой интерфейс:

export interface Valuation {
        data: Array<ValuationData>;
}

export interface ValuationData {
        id: string;
        VehicleSpecification: {
                Vehicle: {
                        make: string;
                        modelSpecific: string;
                };
        };
}

Мой вызов API:

getValuations(limit: any, page: any, orderBy: string, filter: any, fields: any, defaultFilter: any): Observable<Valuation[]>  {
    this.userSessionData = JSON.parse(localStorage.getItem('userSession'));

    const headers = new HttpHeaders().set('Accept', 'application/json')
    .append('Authorization', 'Bearer ' + this.userSessionData.access_token);

return this.http.get<Valuation[]>(this.api_base + '/request/v1/valuation/?limit=' + limit + '&page=' +
 page + '&orderBy=' + orderBy + '&filter=' + filter + '&defaultFilter=' + defaultFilter + '&fields=' + fields,
    {headers: headers });

Источник данных моей таблицы

  dataSource = new ValuationDataSource(this.apiService);
  displayedColumns = ['id'];

export class ValuationDataSource extends DataSource<any> {
  constructor(private apiService: ApiService) {
    super();
  }
  connect(): Observable<Valuation[]> {
    return this.apiService.getValuations('10', '1', '', '',
        '["id","VehicleSpecification-Vehicle-make", "VehicleSpecification-Vehicle-modelSpecific"]', '');
  }
  disconnect() {}
}

Мой стол

    <mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef> id </mat-header-cell>
            <mat-cell *matCellDef="let valuation"> {{valuation.id}} </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

Ответ API

{"error":false,"message":"Ok","paginator":{"records":271072,"pages":27108,"currentPage":1,"recordsPage":10},"data":[{"id":6452421,"VehicleSpecification":{"Vehicle":{"make":"CITROEN","modelSpecific":"C4"}}},{"id":6452431,"VehicleSpecification":{"Vehicle":{"make":"FIAT","modelSpecific":"PUNTO"}}},{"id":6452441,"VehicleSpecification":{"Vehicle":{"make":"AUDI","modelSpecific":"A6"}}},{"id":6452451,"VehicleSpecification":{"Vehicle":{"make":"CITROEN","modelSpecific":"C1"}}},{"id":6452461,"VehicleSpecification":{"Vehicle":{"make":"FIAT","modelSpecific":"SEICENTO"}}},{"id":6452471,"VehicleSpecification":{"Vehicle":{"make":"TOYOTA","modelSpecific":"PREVIA"}}},{"id":6452481,"VehicleSpecification":{"Vehicle":{"make":"VOLKSWAGEN","modelSpecific":"PASSAT"}}},{"id":6452491,"VehicleSpecification":{"Vehicle":{"make":"VOLVO","modelSpecific":"V60"}}},{"id":6452501,"VehicleSpecification":{"Vehicle":{"make":"LAND ROVER","modelSpecific":"RANGE ROVER SPORT"}}},{"id":6452511,"VehicleSpecification":{"Vehicle":{"make":"MERCEDES-BENZ","modelSpecific":"A-KLASSE"}}}]}

Answer 1

здесь у меня есть пример на stackblitz:

Mattable с данными из бэкэнда

Надеюсь, это поможет