当dataSource可观察时,MatSort不适用于Angular Material Table

我试图让我的一个数据表使用默认的排序功能 . 我正在使用角度材料表MatSoftModule .

现在,我从API中加载了非常简单的数据 . 在我的控制器中,我正在调用一个返回Observable的服务函数:

export class DomainComponent implements OnInit {

  domains$: Observable<Domain[]>;

  columnsToDisplay = ['id', 'title'];

  constructor(private domainService: DomainService) { }

  ngOnInit() {
    this.loadDomains();
  }

  private loadDomains() {
    this.domains$ = this.domainService.getDomains();
  }

}

在视图中我只是使用observable作为dataSource:

<table mat-table [dataSource]="domains$" matSort matSortActive="id" matSortDirection="asc" class="mat-elevation-z4">

    <!-- Id Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
      <td mat-cell *matCellDef="let element" class="td-id"> {{element.id}} </td>
    </ng-container>

    <!-- Title Column -->
    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>
      <td mat-cell *matCellDef="let element" class="td-title"> {{element.title}} </td>
    </ng-container>

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

表本身工作得很好,在这种情况下, Headers 甚至显示为可排序(甚至可点击) . 然而,运动实际上并没有改变 .

从文档:https://material.angular.io/components/table/overview#sorting

看起来我需要监听dataSource的"bind" sort 函数到matSort . 但是,文档讨论的是简单的对象数组 .

如下所述,在没有自定义DataSource实现的疯狂的情况下,使排序工作的最简单方法是什么:https://blog.angular-university.io/angular-material-data-table/

回答(0)