Angular嵌套子数组排序后数据变更DOM未更新问题

这个问题和Angular自带的变更检测机制无关，核心是 CDK 虚拟滚动的检测逻辑和数组排序方法的特性冲突导致的：

• Array.sort() 是原地修改方法，排序完成后不会改变原数组的内存引用地址
• *cdkVirtualFor 为了保证虚拟滚动性能，默认通过数组引用+条目对象引用判断数据是否变化，当嵌套的Matters数组只做原地排序、没有更换引用时，虚拟滚动组件会判定数据无更新，不会触发视图重绘
• 切换Visible属性时，嵌套的虚拟滚动列表会被销毁后重新初始化，初始化时会直接读取当前内存里已经排序好的数组，这也是切一次显隐就能看到正确排序结果的原因。手动调用ChangeDetectorRef.detectChanges()只会触发Angular框架层面的变更检测，没法通知CDK虚拟滚动组件识别到原地修改的数组变化。

方案1：排序后替换子数组引用（改动最小，稳定性最高） #

所有排序逻辑执行完成后，给对应客户端的Matters属性赋值一个新的数组实例，打破原引用，让*cdkVirtualFor识别到数据变化即可。
只需要修改matterArraySort方法里的排序分支，排序完成后用展开运算符做一层浅拷贝替换原数组：

// 原排序代码
this.clients[i].Matters.sort((a, b) => (a.MatterName < b.MatterName) ? -1 : 1 );
// 修改为
this.clients[i].Matters = [...this.clients[i].Matters.sort((a, b) => (a.MatterName < b.MatterName) ? -1 : 1 )];

所有排序分支（名称升/降序、日期升/降序）都做同样处理即可，修改后不需要额外调用detectChanges就能正常触发视图更新。

方案2：配置自定义trackBy函数（辅助优化） #

可以给嵌套层的*cdkVirtualFor配置自定义追踪函数，用业务唯一标识追踪列表条目，辅助虚拟滚动识别数据顺序变化：

1. 在组件类中添加trackBy方法：

trackByMatter(index: number, matter: Matters): string {
  return matter.MatterNumber; // 用事项编号作为唯一追踪标识
}

2. 修改模板中嵌套的虚拟循环定义，添加trackBy配置：

<div *cdkVirtualFor="let m of c.Matters; let i = index; trackBy: trackByMatter">

注意：部分低版本的Angular CDK中，仅配置trackBy仍然无法识别原地排序的变化，需要配合方案1的引用替换使用。

你模板里的「Show Matters」按钮标签有语法错误，(click)事件的闭合引号位置写错了，会导致模板解析异常，需要修正：

<!-- 错误写法 -->
<button mat-raised-button (click)="getClientMatters(c.ClientNumber); title="show matters">
<!-- 正确写法 -->
<button mat-raised-button (click)="getClientMatters(c.ClientNumber)" title="show matters">

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