Angular计算信号仅首次更新，后续依赖变更不触发更新问题

问题场景 #

• 想用computed信号实现数组过滤，根据子组件切换按钮的反馈过滤器展示匹配结果
• 父组件定义了Data接口、dataArray数组、filtersProd信号、filteredProdData计算信号，过滤逻辑写在filterByFeedBackRating函数里
• 父组件模板通过双向绑定把filtersProd传给子组件app-filter-source-feedback，同时把filteredProdData()传给表格组件app-table-performance
• 子组件FilterSourceFeedback用model.required定义filters信号，模板通过mat-button-toggle-group绑定filters().feedback
• 表格组件TablePerformance接收data输入，用computed创建MatTableDataSource
• 核心问题：切换按钮时，父子组件的filters信号同步正常，但filteredProdData只在初始状态执行过滤，后续依赖变更时完全不触发重新计算

可能原因及解决办法 #

1. computed未直接读取依赖信号 #

Angular的computed只会自动追踪回调内部直接读取的信号值。如果你的filterByFeedBackRating函数里才去读filtersProd()，而computed回调只是调用这个函数，那computed根本感知不到依赖变化。

错误写法：

// 错误：computed里没直接读filtersProd()，依赖追踪失效
filteredProdData = computed(() => this.filterByFeedBackRating(this.dataArray));

filterByFeedBackRating(data: Data[]) {
  const filterValue = this.filtersProd().feedback;
  return data.filter(item => item.feedback === filterValue);
}

修正写法：
在computed回调里直接读取filtersProd()，让Angular明确追踪这个依赖：

// 方案一：把过滤逻辑直接写在computed里
filteredProdData = computed(() => {
  const filterValue = this.filtersProd().feedback;
  return this.dataArray.filter(item => item.feedback === filterValue);
});

// 方案二：保留过滤函数，但在computed里传递过滤器值
filteredProdData = computed(() => {
  const currentFilters = this.filtersProd();
  return this.filterByFeedBackRating(this.dataArray, currentFilters);
});

filterByFeedBackRating(data: Data[], filters: typeof this.filtersProd) {
  return data.filter(item => item.feedback === filters.feedback);
}

2. dataArray是普通数组而非信号 #

如果dataArray是普通JS数组，哪怕你修改了数组内容，computed也不会触发更新——因为computed只认信号的变更，普通变量的修改不在它的追踪范围内。

修正方案：
把dataArray改成signal：

// 定义成信号
dataArray = signal<Data[]>([/* 初始数据 */]);

// 更新数据时用set或update
// 替换整个数组
this.dataArray.set(newDataList);
// 修改现有数组（比如添加元素）
this.dataArray.update(prev => [...prev, newDataItem]);

这样computed里读取this.dataArray()时，就能感知到数组的变化。

3. 子组件直接修改对象属性未触发信号更新 #

如果子组件是直接改filters().feedback（比如this.filters().feedback = 'good'），而不是用信号的set/update方法，那信号根本不会对外发送变更通知。Angular的signal要求必须通过官方方法修改值，才能触发依赖更新。

子组件错误写法：

// 错误：直接改对象属性，信号没感知
onToggleChange(value: string) {
  this.filters().feedback = value;
}

子组件修正写法：
用set或update更新整个filters对象：

// 方案一：用set创建新对象
onToggleChange(value: string) {
  this.filters.set({
    ...this.filters(),
    feedback: value
  });
}

// 方案二：用update基于当前值修改
this.filters.update(currentFilters => ({ ...currentFilters, feedback: value }));

4. 表格组件的computed使用不当 #

如果表格组件里用computed创建MatTableDataSource，要确保data输入是信号；如果是普通@Input()，得用ngOnChanges监听变化并更新数据源，否则表格不会刷新。

表格组件修正示例：

@Component({
  selector: 'app-table-performance',
  template: `...`
})
export class TablePerformance {
  @Input() data!: Data[];
  dataSource = new MatTableDataSource<Data>([]);

  ngOnChanges(changes: SimpleChanges) {
    // 监听data输入的变化，更新数据源
    if (changes['data']) {
      this.dataSource.data = this.data;
    }
  }

  // 如果用信号输入（Angular 16+），可以这么写：
  // @Input() data!: Signal<Data[]>;
  // dataSource = computed(() => new MatTableDataSource<Data>(this.data()));
}

验证重点 #

• 确认computed回调里直接读取了所有需要追踪的信号（比如filtersProd()和dataArray()如果是信号的话）
• 所有信号的修改都用set/update方法，别直接改对象属性
• 检查子组件的双向绑定是否正确传递了信号变更

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