Angular Signal computed未触发组件重渲染问题求助

问题根源 #

你遇到的问题核心在于Array.sort()是原地修改数组的方法，在computed回调里直接对Signal返回的原数组执行排序时，会直接修改Signal内部存储的原始数组。这违反了Signal的不可变更新原则，同时导致computed的依赖追踪失效——computed会缓存排序后的数组引用，当服务更新Signal时，无法正确感知到数组变化，进而不触发组件重渲染。

修正方案 #

在排序前先复制原数组，创建一个新数组再执行排序，避免修改Signal内部的原始数据，确保computed能正常追踪Signal的变化：

组件代码修正（方式一：扩展运算符） #

public lobbies = computed(() =>
  [...this._lobbyService.lobbies()].sort((a, b) => (a.id > b.id ? 1 : -1))
);

组件代码修正（方式二：slice方法） #

public lobbies = computed(() =>
  this._lobbyService.lobbies().slice().sort((a, b) => (a.id > b.id ? 1 : -1))
);

补充说明 #

• Signal的依赖追踪基于内部值的引用变化，原地修改数组不会改变引用，computed无法触发重新计算；
• 操作Signal中的数组/对象时，始终先创建副本再修改，才能保证Signal和computed的依赖追踪机制正常工作。

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