来自rest api的角度材料数据表

Question

我是 Angular 和 Angular 材料的新手。我无法将我的数据从 http 服务绑定并显示到表中。当我控制台加载页面后获取数据时。有时我会得到未定义的错误。在我使用它时，请在下面找到我的代码。

export class OrdersDetailsComponent implements AfterViewInit, OnInit {
  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: false }) sort: MatSort;
  @ViewChild(MatTable, { static: false }) table: MatTable<OrdersDetailsItem>;

  dataSource: OrdersDetailsDataSource;

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['OrderId', 'OrderNumber'];

  constructor(
    private apiService: OrdersDetailsService
  ) { }

  ngOnInit() {
     this.dataSource = new OrdersDetailsDataSource();
    this.getAllOrders()
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;

  }
  getAllOrders() {
    this.apiService.getOrders().subscribe((data: any) => {
      this.dataSource.data = data
      console.log(data)
      return data
    })
  }

  ngAfterViewInit() {
       this.table.dataSource = this.dataSource;

  }
}

我的 api

  getOrders() {
    return this.http.get(environment.apiUrl + 'admin/getAllOrders')
  }

我的html

<div class="mat-elevation-z8">
  <table mat-table #table [dataSource]="dataSource" class="full-width-table" matSort aria-label="Elements">
    <!-- Id Column -->
    <ng-container matColumnDef="OrderId">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
      <td mat-cell *matCellDef="let row">{{row.OrderId}}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="OrderNumber">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Order number</th>
      <td mat-cell *matCellDef="let row">{{row.OrderNumber}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
    [pageSizeOptions]="[25, 50, 100, 250]">
  </mat-paginator>
</div>

Answer 1

尝试如下。从 api 获取数据后创建 dataSource 对象。

dataSource = new MatTableDataSource < OrdersDetailsDataSource > (null);

ngOnInit() {
  this.getAllOrders()
}

getAllOrders() {
    this.apiService.getOrders().subscribe((data: any) => {
      this.dataSource = new MatTableDataSource < OrdersDetailsDataSource > (data); //pass the array you want in the table
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      return data
    })