如何用Angular Material拖拽CDK更新服务数据并触发计算信号更新？

问题核心在于Angular Signal对引用类型的变化检测机制：只有当数组的引用发生改变时，依赖它的computed信号才会重新计算。你之前拖拽排序时大概率是直接在原数组上做原地修改（比如用splice调整顺序），数组引用没变，所以generated这个computed信号不会更新；而模板绑定因为拖拽事件触发了变更检测，所以直接绑定templates()的列表能显示更新后的顺序。

具体修复步骤： #

1. 在TemplateService中添加排序方法，确保更新信号时使用新数组引用

@Injectable({ providedIn: 'root' })
export class TemplateService {
  private readonly _templates = signal<Template[]>([]);
  templates = this._templates.asReadonly();

  // 新增排序方法，接收排序后的新数组
  reorderTemplates(newSortedTemplates: Template[]) {
    // 用展开运算符创建新数组，确保引用变化
    this._templates.set([...newSortedTemplates]);
  }

  // 原有新增模板方法保持不变
  addTemplate() {
    this._templates.update(templates => [...templates, { id: Date.now().toString(), data: Math.random() }]);
  }
}

2. 修改组件的drop事件处理逻辑，基于原数组副本排序后调用服务方法

drop(event: CdkDragDrop<Template[]>) {
  // 先创建原数组的副本，避免修改原数组引用
  const templateCopy = [...this.templateService.templates()];
  // 在副本上执行拖拽排序
  moveItemInArray(templateCopy, event.previousIndex, event.currentIndex);
  // 调用服务方法更新信号
  this.templateService.reorderTemplates(templateCopy);
}

这样修改后，templates信号会因为新数组的引用变化而触发更新，依赖它的generated computed信号也会自动重新计算，底部经转换的数组就能正常显示拖拽排序后的结果了。

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