如何使用mat-select下拉菜单替代Angular Material Sort Header实现表格排序

需求说明 #

需要使用mat-select下拉组件作为排序触发器，替代默认的 Angular Material Sort Header 表头点击排序功能，点击下拉菜单中的对应字段选项即可让表格按照该字段排序，无需点击表头。

问题原因 #

初始实现的sortTableBy方法未生效，核心原因是：

• 表格数据源providersAdmin是在接口请求成功后才重新实例化的MatTableDataSource对象，ngAfterViewInit阶段提前绑定的sort实例已经和新的数据源失去关联
• 触发排序逻辑时，没有重新将sort实例绑定到当前有效的数据源上

解决方案 #

修复后的排序触发方法 #

每次触发排序时重新将sort实例绑定到数据源即可生效：

sortTableBy(event: any) {
    const sortState: Sort = {
      active: "username",
      direction: "desc",
    };
    this.sort.active = sortState.active;
    this.sort.direction = sortState.direction;
    this.sort.sortChange.emit(sortState);
    // 新增本行，将sort实例重新绑定到当前数据源
    this.providersAdmin.sort = this.sort;
}

更优化的实现方案 #

可以直接在异步获取数据、实例化新数据源的阶段就完成sort绑定，无需每次触发排序都重复绑定：

getAllAdmins() {
    this.isLoading = true;
    this.homeService.getAllAdmins().subscribe(
      (response) => {
        this.admins = response;
        this.providersAdmin = new MatTableDataSource(this.admins);
        // 实例化数据源后立刻绑定sort实例，避免后续排序失效
        this.providersAdmin.sort = this.sort;
        this.isLoading = false;
      },
      (error) => {}
    );
}

内容的提问来源于stack exchange，提问作者duhovicm