Question

My table is not showing any data, the API call is succeeding in the developer tools of my browser.

There are no errors in the console.

My interface:

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

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

My API call:

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 });

My Table Data Source

  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() {}
}

My Table

    <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>

The API response

{"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 with data from backend

希望这会有所帮助

Angular - mat-table not showing any data from api

1 个答案: