Angular Material表格实现按钮点击触发价格自定义排序

我来帮你搞定Angular Material表格通过按钮触发价格排序的需求~ 其实咱们可以利用MatSort的API来实现，既能保持和原生表头排序一致的交互体验，又能通过按钮手动触发。下面一步步来修改你的代码：

第一步：确保MatSort与数据源绑定 #

你当前的代码里，在异步获取数据后重新创建了dataSource，但没有把MatSort和它关联起来。咱们需要在数据加载完成后，把sort绑定到dataSource上，这样排序才能生效：

修改ngOnInit里的HTTP请求部分：

ngOnInit() {
  this.http.get(this.url)
  .subscribe(response => {
    this.data = response;
    this.dataSource = new MatTableDataSource(this.data);
    this.dataSource.sort = this.sort; // 新增这行，绑定MatSort到数据源
  })
  this.username = this.sharedService.username
}

第二步：实现按钮对应的排序方法 #

接下来，在组件类里补全priceHighToLow和新增priceLowToHigh方法，通过MatSort的sort方法手动触发排序：

priceHighToLow() {
  // 定义排序状态：按price字段降序（高到低）
  const sortState: Sort = {active: 'price', direction: 'desc'};
  this.sort.sort(sortState);
}

priceLowToHigh() {
  // 定义排序状态：按price字段升序（低到高）
  const sortState: Sort = {active: 'price', direction: 'asc'};
  this.sort.sort(sortState);
}

第三步：更新模板中的按钮 #

把你注释掉的“Low to high”按钮打开，并绑定对应的点击事件：

<table>
  <h2>Price</h2>
  <button (click)="priceHighToLow()"> High to low</button><br>
  <button (click)="priceLowToHigh()"> Low to high</button>
  <!-- <h2>Quantity</h2>
  <button (click)="quantityHighToLow()"> High to low</button><br>
  <button (click)="quantityLowToHigh()"> High to low</button> -->
</table>

额外说明 #

用这种方式实现的好处是，点击按钮后不仅表格会排序，Price列的表头还会同步显示排序箭头（和点击表头排序的效果一致），用户体验更统一。

如果你不想同步表头的排序状态，也可以选择手动排序数据再更新数据源（这种方式表头不会显示箭头），代码示例如下：

priceHighToLow() {
  // 手动对data数组按price降序排序
  this.data.sort((a: IItem, b: IItem) => b.price - a.price);
  // 重新赋值dataSource的data，触发表格更新
  this.dataSource.data = [...this.data];
}

priceLowToHigh() {
  this.data.sort((a: IItem, b: IItem) => a.price - b.price);
  this.dataSource.data = [...this.data];
}

这样修改后，点击对应的按钮就能实现价格的升序/降序排序啦~

备注：内容来源于stack exchange，提问作者Tamilvanan