Angular Mat Table 具有远程数据源

Question

我正在尝试更新数据源，但当数据显示时，它没有应用任何已设置的排序或分页。

注意：我在进行更改之前使用 table schematic from angular material 作为基础。

TS

export class DummyTableComponent {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(MatTable) table!: MatTable<any>;
  items$!: Observable<any>;
  dataSource: MatTableDataSource<any>;

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

  constructor(private http: HttpClient) {
    this.dataSource = new MatTableDataSource<any>();
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;

    this.items$ = this.http.get<any>(environment.apiUrl + "/items)
      .pipe(
        map((retval: any) => retval.items),
        tap(retval => {
          this.dataSource.data = retval;
          this.dataSource.sort = this.sort;
          this.dataSource.paginator = this.paginator;
        })
      );
  }
}

HTML

<div class="mat-elevation-z1" *ngIf="items$ | async">
  <table mat-table class="full-width-table" matSort [dataSource]="dataSource">
    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>
      <td mat-cell *matCellDef="let element"> {{element.title}} </td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
      <td mat-cell *matCellDef="let element"> {{element.status}} </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]="10"
      [pageSizeOptions]="[1,5, 10, 20]"
      aria-label="Select page">
  </mat-paginator>
</div>

本质上数据被加载到 table，仅此而已。无法进行排序或分页。

Answer 1

因为您正在使用 *ngIf="items$ | async"，所以尚未呈现任何子组件。因此，MatSort 和 MatPaginator 在 tap 运算符中未定义。

您可以用 setTimeout 包装它（让它们先渲染）或使用 [hidden]="(items$ | async) === null" 而不是 *ngIf。

Angular Mat Table 具有远程数据源

Angular Mat Table with remote source for data

angular-material

angular