Angular - mat-table 未显示来自 api 的任何数据答案

【问题标题】：Angular - mat-table not showing any data from apiAngular - mat-table 未显示来自 api 的任何数据
【发布时间】：2019-06-03 00:41:50
【问题描述】：

我的表格没有显示任何数据，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"}}}]}

【问题讨论】：

通过调用 api 获取数据需要一些时间，另一方面模板在初始加载时运行。通过将默认数据分配给数据源进行检查，如果表生成正确，那么肯定就是问题所在。尝试添加条件*ngIf=dataSourcebefore <mat-table [dataSource]="dataSource">
好像不行，表还是空的
我认为这里的问题是 api 响应的结构，表的数据在 kay“数据”内部而不是第一个元素。但我找不到解决方案。
能否请您添加 api 响应。它需要采用正确的格式。
@WouterDoornbos，我遇到了完全相同的问题。 API调用在我的浏览器的开发者工具中成功并且没有错误。它显示了 mat-table 中的行，但不显示行中的数据。你搞清楚了吗？

标签： angular material-design angular6 mat-table

【解决方案1】：

这里我有一个关于 stackblitz 的例子：

Mattable with data from backend

希望对你有帮助

【讨论】：

谢谢！这个例子好像是一样的，请看我上一条评论