0

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

1 回答 1

0

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

可处理来自后端的数据

希望这可以帮助

于 2019-01-08T12:05:16.917 回答