Angular嵌套MatTable排序功能失效，求排查及解决方法

问题根因 #

嵌套表格通常是基于上层选择结果**条件渲染（默认用*ngIf隐藏）**的，ngAfterViewInit生命周期触发时，未渲染的子表格对应的matSort实例（你代码里的#sdsorter、#dsorter）还未初始化，此时给数据源绑定的sort是undefined，自然排序失效。

解决方案 #

调整matSort的绑定时机，在子表格渲染完成后再给对应数据源绑定排序实例即可，具体实现可以参考以下代码：

1. 组件内查询声明

import { MatSort } from '@angular/material/sort';

// 声明对应模板引用的查询器，static设为false适配条件渲染元素
@ViewChild('zsorter', { static: false }) zsorter: MatSort;
@ViewChild('sdsorter', { static: false }) sdsorter: MatSort;
@ViewChild('dsorter', { static: false }) dsorter: MatSort;

2. 子表格渲染后绑定sort

在你上层表格选中触发子表格显示的逻辑后，等待视图更新完成再绑定排序：

// 上层城市表格选中触发的回调函数，根据你的实际业务逻辑修改函数名
onCitySelected(selectedCity: any) {
  // 赋值子表格数据源
  this.senderDevicesData.data = selectedCity.locations;
  // 等待DOM渲染完成后绑定排序
  setTimeout(() => {
    this.senderDevicesData.sort = this.sdsorter;
    // 可选：重新赋值sortingDataAccessor确保生效
    this.senderDevicesData.sortingDataAccessor = (data, sortHeaderId) => data[sortHeaderId];
  }, 0);
}

// 同理，位置表格选中后触发房屋表格渲染时做相同处理
onLocationSelected(selectedLocation: any) {
  this.devicesData.data = selectedLocation.houses;
  setTimeout(() => {
    this.devicesData.sort = this.dsorter;
    this.devicesData.sortingDataAccessor = (data, sortHeaderId) => data[sortHeaderId];
  }, 0);
}

验证方法 #

可以在绑定前打印对应的sort实例，确认不再是undefined即可正常排序：

setTimeout(() => {
  console.log(this.sdsorter); // 输出为MatSort实例而非undefined即为正常
  this.senderDevicesData.sort = this.sdsorter;
}, 0);

内容的提问来源于stack exchange，提问作者Gülay Uygun