时间戳

首页 > 解决方案 > 如何以编程方式触发 mat-table 排序？

angular - 如何以编程方式触发 mat-table 排序？

问题描述

我有一个使用 mat-sort 和自定义sortingDataAccessor 的表，以便能够对元素内的一些嵌套数据进行排序（不确定是否相关）。这工作正常，数据已排序，当数据异步更新时会出现问题，因为现在数据不再按顺序排列，因为它已更改并且表尚未更新它的顺序。

那么如何以编程方式触发排序呢？或者更确切地说，即使更新了表格，我如何才能始终保持表格排序dataSource.data？

Stackblitz 展示问题：https ://stackblitz.com/edit/angular-qoytbq

谢谢！

标签： angularangular-componentsmat-table

解决方案

我不确定这是否是官方方式（根据这个问题可能没有），但是在重新分配前一个之前将sort属性设置MatTableDataSource为 nullMatSort似乎可以解决问题

  @ViewChild(MatSort, {static: true}) sort: MatSort;

  //Change table data here...
  //Trigger sort manually
  this.dataSource.sort = null;
  this.dataSource.sort = this.sort;

Stackblitz 演示

注意：根据此github 问题评论，角度材料不会寻找对基础资源的更改

将数组传递给表时，只有更改数组引用时才会重新渲染，因为它基于使用不可变数据数组的原理。

一个简单的解决方法是在基础数据更改时重新分配源的data属性

this.datasource.data = [...ELEMENT_DATA];//For your stackblitz

推荐阅读