angular - 当数据源可观察时，MatSort 不适用于 Angular Material Table

Question

我正在尝试让我的一个数据表使用默认排序功能。 我正在为其使用 Angular Material 表和 MatSoftModule。

现在，我可以从 API 加载非常简单的数据。在我的 Controller 中，我正在调用一个返回 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();
  }

}

在 View 中，我只是将可观察对象用作数据源:

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

表格本身工作得很好，在这种情况下，标题甚至显示为可排序(甚至可点击)。但是，排序实际上并没有改变。

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

看起来我需要听“绑定(bind)”dataSource 的sort 函数到matSort。但是，文档讨论的是简单的对象数组。

使排序工作的最简单方法是什么？ ？

Answer 1

您可以使用 map 运算符对 Observable 数据进行排序。在 ngOnInit 中，您将初始排序顺序作为参数传递给 loadDomains:

import { map } from "rxjs/operators";
import { Sort } from "@angular/material";

ngOnInit() {
  this.loadDomains({active: "id", direction: "asc"});
}

loadDomains(sort: Sort) {
  this.domains$ = this.domainService.getDomains().pipe(
    map((domains: Array<Domain>) => domains.sort((d1, d2) => this.sortDomains(d1, d2, sort)))
  );
}

sortDomains(d1: Domain, d2: Domain, sort: Sort) {
  const one = sort.direction === "asc" ? 1 : (sort.direction === "desc" ? -1 : 0);
  if (d1[sort.active] > d2[sort.active]) {
    return one;
  } else if (d1[sort.active] < d2[sort.active]) {
    return -one;
  } else {
    return 0;
  }
}

在模板中，您使用 matSortChange 事件处理程序中的新排序顺序调用 loadDomains:

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

您可以在 this stackblitz 中看到演示, 基于 original stackblitz由@AlexHaslam 提供。