Angular 角度网格排序：将默认的升序方法更改为忽略0

考虑一个有角度的垫子桌子，上面有物品和物品的价格，就像这样（水果和价格是标题）：

这两个标题都是mat sort header，但当单击“Price”按价格对项目进行排序时，我希望它们按升序列出，忽略0并将所有0值放在列表的末尾，如：

Fruit      Price
Apple      1
Pear       2
Banana     0

理想情况下，当按降序排序时，0值仍将放在最末尾，如下所示

Fruit      Price
Pear       2
Apple      1
Banana     0

目前，Angular仅提供升序[0,1,2]。如何使用自己的方法覆盖默认的升序

---

谢谢您的时间。

您可以使用

matSortChange

事件更改数据源

Stackblitz示例：

HTML

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Name</th>
    <th mat-sort-header="price">Price</th>
  </tr>

  <tr *ngFor="let fruit of sortedData">
    <td>{{fruit.name}}</td>
    <td>{{fruit.price}}</td>
  </tr>
</table>

---

您可以使用

matSortChange

事件更改数据源

Stackblitz示例：

HTML

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Name</th>
    <th mat-sort-header="price">Price</th>
  </tr>

  <tr *ngFor="let fruit of sortedData">
    <td>{{fruit.name}}</td>
    <td>{{fruit.price}}</td>
  </tr>
</table>

---

谢谢你的帮助。我应该提到，我也使用数据源，而不是设置行，所以我不能使用

让sortedData的结果

，有没有办法在数据排序后更新数据源，可能是这样的<代码>this.dataSource.data=this.sortedData这不适用于多个水果：@Stavm感谢Stavm的帮助。我应该提到，我也使用数据源，而不是设置行，所以我不能使用

让sortedData的结果

，有没有办法在数据排序后更新数据源，可能是这样的<代码>this.dataSource.data=this.sortedData这不适用于多个水果：@Stavm

fruits = [
    {name: 'Banana', price: 0 },
    {name: 'Apple', price: 0 },
    {name: 'Orange', price: 2 },
    {name: 'Tomato', price: 1 },
  ];

  sortedData: any[];

  constructor() {
    this.sortedData = this.fruits.slice();
  }

  sortData(sort: Sort) {
    const data = this.fruits.slice();
    if (!sort.active || sort.direction === '') {
      this.sortedData = data;
      return;
    }

    this.sortedData = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      if (b.price === 0) return -1;
      return compare(a.price, b.price, isAsc);
    });
  }