Таблица данных углового материала из rest api

Я новичок в Angular и angular материалах. Я не могу привязать и отобразить свои данные из http-сервиса в таблице. когда я консолью данные, я получаю их после загрузки страницы. иногда я получаю ошибку undefined. Пожалуйста, найдите мой код ниже, когда я его использую.

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>

angular angular-material
person Mahmoud Nafea    schedule 26.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте, как показано ниже. создайте объект dataSource после того, как получите данные из api.

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
    })
person hansand    schedule 26.10.2020
comment
Я сделал это, но при консольном журнале (this.dataSource) получаю OrdersDetailsDataSource {sort: MatSort, paginator: MatPaginator}. Однако, когда я консолью данные, я получаю массив с ошибкой не может прочитать свойство длины undefined - person Mahmoud Nafea; 26.10.2020
comment
попробуйте реализовать свою таблицу таким образом. я получил это из документации по материалам. stackblitz.com/angular/ - person hansand; 26.10.2020
comment
это полностью отличается от компонентов, созданных cli в моем приложении. - person Mahmoud Nafea; 26.10.2020
comment
я обновил ответ. обратите внимание, используйте MatTableDataSource для источника данных - person hansand; 26.10.2020
comment
Спасибо чувак. Я исправил это до вашего решения, но с вашим я смог выполнить фильтрацию. Я очень ценю это. - person Mahmoud Nafea; 28.10.2020