使用扩展运算符构造数组时，Signal的.set()方法为何不更新？

首先明确：Angular Signal 对引用类型（比如数组）的更新，依赖新值与当前值的引用不同——只要你传入一个全新的数组对象，.set()就会触发更新。你遇到的问题，大概率是以下某一种情况：

1. 误操作 Signal 对象而非其值 #

这是最常见的低级错误：你在扩展数组时，直接用了 Signal 变量（比如this.files），而不是调用它获取当前值（this.files()）。

错误示例：

onUploadedFiles(newFiles: ImageInfo[]) {
  // 错误：this.files 是 Signal 对象，不是数组值
  const updated = [...this.files, ...newFiles];
  this.files.set(updated);
}

正确写法：

onUploadedFiles(newFiles: ImageInfo[]) {
  // 正确：先调用 Signal 获取当前数组值
  const existing = this.files();
  const updated = [...existing, ...newFiles];
  this.files.set(updated);
}

如果用了 Signal 对象直接扩展，得到的不是ImageInfo数组，而是包含 Signal 内部属性的奇怪数组，模板无法正确渲染，看起来像是 Signal 没更新。

2. 合并时复用了原数组的引用 #

你可能误以为用了扩展运算，但实际代码中是修改原数组后直接 set 原数组，导致数组引用没有变化，Signal 检测不到更新。

错误示例：

onUploadedFiles(newFiles: ImageInfo[]) {
  const existing = this.files();
  // 错误：直接修改原数组，引用没变
  existing.push(...newFiles);
  this.files.set(existing);
}

这种情况和你说的「直接传入新数组生效」并不矛盾——因为直接传新数组（比如this.files.set([new ImageInfo()])）是全新的引用，而修改原数组后 set 原数组，引用还是旧的，Signal 会忽略这个更新。

3. 验证方法 #

你可以在.set()前加一行日志，快速定位问题：

const existing = this.files();
const updated = [...existing, ...newFiles];
console.log(existing === updated); // 如果输出 true，说明引用没变化，肯定是代码写错了
this.files.set(updated);

如果输出false但 UI 还是没更新，那可能是模板绑定问题——检查模板中是否正确绑定了 Signal（比如用*ngFor="let file of files"，Angular 会自动解包 Signal；如果是手动解包要写files()）。

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