要解决这个问题，您可以使用Angular Material的@angular/cdk库中的moveItemInArray函数来更新排序后的数组。以下是一个示例代码：

1.首先，您需要导入moveItemInArray函数和CdkDragDrop事件：

import { moveItemInArray, CdkDragDrop } from '@angular/cdk/drag-drop';

2.在组件类中，定义一个数组以保存表格数据，并在ngOnInit生命周期钩子中初始化它：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  tableData: any[] = [];

  ngOnInit() {
    // 初始化表格数据
    this.tableData = [
      { id: 1, name: 'John' },
      { id: 2, name: 'Jane' },
      { id: 3, name: 'Alice' },
      { id: 4, name: 'Bob' }
    ];
  }
}

3.在模板中，使用mat-table和cdkDropList指令来创建可拖动的表格，并在每个表头列中添加mat-sort-header指令来启用排序功能：

    
    

  
 ID 
    
 {{row.id}} 
  
  
 Name 
    
 {{row.name}} 
  

  

  

4.在组件类中，定义一个drop方法来处理拖放事件，并在其中使用moveItemInArray函数来更新排序后的数组：

drop(event: CdkDragDrop) {
  moveItemInArray(this.tableData, event.previousIndex, event.currentIndex);
}

现在，当您在表格的列上进行拖放排序时，会调用drop方法来更新表格数据数组，并且动画过渡的起始状态将会正确更新。