如何正确使用Angular Signal Effect监听数组变化？

问题场景 #

使用Angular Signal的effect监听对象数组信号变化时，仅在通过filter删除数组元素时触发effect；执行插入元素或更新数组内对象操作时，effect完全不响应。只有先重置信号值再设置新值，effect才会触发。

问题代码示例 #

触发effect的删除逻辑：

case "DELETE":
  this.houses.update(((houses: House[]) => houses.filter((house: House) => house.id !== payload.old.id)));
  break;

不触发effect的插入逻辑：

case "INSERT":
  this.houses.update((houses: House[]) => {const updatedHouses = houses.push(payload.new); return updatedHouses;})
  break;

监听的effect代码：

effect(() => {
  this.filteredHouses = this.houses();
  this.onFilter();
});

问题根源 #

Angular Signal的更新机制依赖引用变化触发依赖更新：

• filter方法会返回全新的数组引用，信号检测到引用变化，因此触发effect；
• push方法是原地修改原数组，并且返回的是数组的新长度（数值类型），并非新的数组引用。这导致信号内部的数组引用没有变化，自然不会触发关联的effect。

解决方案 #

所有修改数组的操作，必须返回全新的数组引用，禁止原地修改原数组：

1. 插入元素的正确写法
   用扩展运算符创建新数组，替代push：

case "INSERT":
  this.houses.update((houses: House[]) => [...houses, payload.new]);
  break;

2. 更新数组内对象的正确写法
   通过map返回新数组，同时更新目标对象时创建新的对象引用：

case "UPDATE":
  this.houses.update((houses: House[]) => 
    houses.map(house => 
      house.id === payload.id ? {...house, ...payload.updatedData} : house
    )
  );
  break;

额外说明 #

如果需要修改数组中嵌套的对象属性，同样要保证每一层的引用都是新的，避免原地修改嵌套对象，否则信号依然无法检测到变化。

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