mat-table每行绑定FormGroup时自定义排序引发表单错位的问题

你之前操作出现控件状态错乱，本质是两个操作逻辑和框架机制冲突了：

• Array.sort()是原地修改数组的方法，如果当初初始化MatTableDataSource时直接把FormArray.controls的引用赋值给dataSource.data，调用dataSource.data.sort()会直接改动FormArray内部的控件排列顺序，但因为没有同步触发表单的变更检测逻辑，就会出现模板渲染行顺序、控件绑定索引和FormArray内部状态错位，最终导致控件状态跨行关联。
• 手动对data数组做sort的操作完全绕开了MatTableDataSource内置的变更检测管线，框架无法正常感知数组的引用变化，会进一步加剧渲染和状态的错位问题。

MatTableDataSource本身内置了独立的排序管线，所有排序结果都是基于原始数据源生成的派生数组，全程不会改动传入的原始数组顺序，刚好匹配你的需求，具体操作步骤：

1. 初始化数据源时先和原FormArray做引用解耦
   不要直接把FormArray的controls数组引用赋值给dataSource，而是通过浅拷贝生成独立数组，从根源上切断原地操作对原表单结构的影响：

   // 获取外层FormGroup下的persons FormArray实例
   this.personsFormArray = this.formGroup.get('persons') as FormArray;
   this.dataSource = new MatTableDataSource<FormGroup>();
   // 用展开运算符生成新数组，和FormArray.controls的内部数组彻底解耦
   this.dataSource.data = [...this.personsFormArray.controls];
   

2. 接入DataSource内置排序能力，替代手动sort操作
   • 先把MatSort组件实例绑定到数据源上，让DataSource接管排序触发、状态同步的全流程：

     @ViewChild(MatSort) tableSort: MatSort;
     ngAfterViewInit() {
       this.dataSource.sort = this.tableSort;
     }
     

   • 配置自定义取值逻辑，告诉DataSource排序时从当前行FormGroup的哪个控件拿值，不需要改动任何原有表单结构：

     this.dataSource.sortingDataAccessor = (rowGroup: FormGroup, headerId: string) => {
       // headerId对应表格列的matColumnDef标识，比如'firstName'、'lastName'
       return rowGroup.get(headerId)?.value ?? '';
     };
     

3. 自定义排序规则时全程生成新数组
   如果需要自定义比较逻辑，可以重写DataSource的sortData方法，全程生成新数组做排序，不修改原数组的内容：

   this.dataSource.sortData = (originData: FormGroup[], sortState: MatSort) => {
     // 无有效排序状态时直接返回原数组，不做多余操作
     if (!sortState.active || sortState.direction === '') return originData;
     // 基于原数据生成新数组做排序，完全不触碰原FormArray的内部结构
     return [...originData].sort((groupA: FormGroup, groupB: FormGroup) => {
       const valueA = groupA.get(sortState.active)?.value ?? '';
       const valueB = groupB.get(sortState.active)?.value ?? '';
       const isAsc = sortState.direction === 'asc';
       return (valueA < valueB ? -1 : 1) * (isAsc ? 1 : -1);
     });
   };
   

• 全程没有对原FormArray的内部控件顺序做任何重排操作，从根源上避免了表单状态错乱的问题
• 排序逻辑完全走MatTableDataSource的官方管线，框架能正常感知数组变更，不会出现渲染错位
• 之前实现的filterPredicate自定义过滤逻辑和排序管线完全独立，不需要做任何修改就能正常运行

后续动态增删表单项时，只要同步更新dataSource.data = [...this.personsFormArray.controls]即可，不需要手动处理排序后的数组引用——DataSource会在后续的过滤、排序管线中自动基于最新的data内容生成最终渲染的数组。
另外开发时注意FormGroup的类型拼写（不要误写为FromGroup），避免TS编译报错。

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