Angular计算信号tasks未随allTasks更新重新计算的原因

这个问题的核心其实很好理解——你的allTasks是一个普通的类属性，并非Angular的响应式信号（Signal），而计算信号（computed）的自动更新机制，只对它依赖的其他信号变化敏感，普通变量的更新根本不会被Angular的响应式系统感知到。

具体来说：

• 计算信号的工作逻辑是：首次执行时，它会自动记录自己依赖的所有信号（比如你代码里的userId()输入信号）。之后只有当这些被追踪的信号发生变化时，计算信号才会重新运行并更新结果。
• 你在onCompleteTask方法里虽然替换了allTasks的引用（换成了新的数组），但allTasks只是个普通变量，Angular完全不知道它发生了变化，自然不会触发tasks的重新计算。哪怕你给它赋了全新的数组，只要它不是信号，计算信号的依赖列表里就没有它，Angular不会去检查它的状态。

要解决这个问题，只需要把allTasks改成响应式信号就行，步骤如下：

1. 把allTasks用signal()创建：

import { Component, input, computed, signal } from '@angular/core';
// ... 其他导入

export class TaskListComponent {
  userId = input<string>();
  userName = input<string>();
  // 改成响应式信号
  allTasks = signal<Task[]>([
    {
      id: 't1',
      userId: 'u1',
      title: 'Master Angular',
      summary: 'Learn all the basic and advanced features of Angular & how to apply them.',
      dueDate: '2025-12-31',
    },
    {
      id: 't2',
      userId: 'u3',
      title: 'Build first prototype',
      summary: 'Build a first prototype of the online shop website',
      dueDate: '2024-05-31',
    },
    {
      id: 't3',
      userId: 'u3',
      title: 'Prepare issue template',
      summary: 'Prepare and describe an issue template which will help with project management',
      dueDate: '2024-06-15',
    },
  ]);
  // ...
}

2. 在计算信号tasks里，通过调用this.allTasks()来访问信号的值（和你访问userId()的方式一致）：

tasks = computed<Task[]>(() => {
  console.log('Computing tasks for user', this.userId());
  return this.allTasks().filter((task) => task.userId === this.userId());
});

3. 更新allTasks时，使用信号的update方法（推荐，因为它基于当前值生成新值）或者set方法：

onCompleteTask(id: string) {
  this.allTasks.update(currentTasks => currentTasks.filter(task => task.id !== id));
  console.log('Completed task', id, this.allTasks().length);
}

这样修改后，当allTasks信号被更新时，计算信号tasks因为依赖了它，就会自动重新计算，组件视图也会随之更新。

备注：内容来源于stack exchange，提问作者Marc