Angular Signals与Computed Properties疑问：普通属性删任务失效原因

核心原因：响应式追踪机制的区别 #

Angular的computed计算属性只会追踪Signals、Inputs、其他计算属性这类被Angular响应式系统管理的值的变化。

• 当dummyTasks是Signal时：
  初始化selectedUserTasks时，this.dummyTasks()会让computed注册对这个Signal的依赖。当你在onCompleteTask中调用dummyTasks.set()更新值时，Signal会主动通知所有依赖它的计算属性重新执行逻辑，selectedUserTasks会重新过滤数组，视图随之刷新，所以删除操作有效。

• 当dummyTasks是普通类属性时：
  computed只会在组件初始化时执行一次过滤逻辑，Angular无法感知普通属性的赋值变化。即使你重新赋值this.dummyTasks = ...，selectedUserTasks不会重新计算，视图依然显示初始的数组，导致删除操作看起来失效。

代码对比分析 #

有效：Signal版本代码

export class TasksComponent {
  selectedUser = input<User>()
  selectedUserId = input.required<string>()
  
  // 用Signal定义任务数组
  dummyTasks = signal([
    {
      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',
    },
  ])

  // computed自动追踪dummyTasks Signal的变化
  selectedUserTasks = computed(() => (
    this.dummyTasks().filter((task) => this.selectedUserId() === task.userId)
  ))

  onCompleteTask(id: string) {    
    // 更新Signal值，触发依赖更新
    this.dummyTasks.set(this.dummyTasks().filter((task) => task.id !== id))
  }
}

失效：普通属性版本代码

export class TasksComponent {
  selectedUser = input<User>()
  selectedUserId = input.required<string>()
  
  // 普通数组属性，不在Angular响应式追踪范围内
  dummyTasks = [
    {
      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',
    },
  ]

  // computed仅初始化时执行一次，后续不会响应dummyTasks的变化
  selectedUserTasks = computed(() => (
    this.dummyTasks.filter((task) => this.selectedUserId() === task.userId)
  ))

  onCompleteTask(id: string) {    
    // 重新赋值普通属性，但computed不会重新计算
    this.dummyTasks = this.dummyTasks.filter((task) => task.id !== id)
  }
}

普通属性的修复方案 #

如果一定要使用普通属性，需要手动触发Angular的变更检测：

import { ChangeDetectorRef } from '@angular/core';

export class TasksComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  // ...其他代码不变

  onCompleteTask(id: string) {    
    this.dummyTasks = this.dummyTasks.filter((task) => task.id !== id)
    // 手动通知Angular检测组件变更，更新视图
    this.cdr.markForCheck();
  }
}

不过更推荐使用Signals，这是Angular 16+主推的响应式方案，无需手动处理变更检测，代码更简洁高效。

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