Angular数组清空时变更检测失效问题求助

在Angular项目中，父、子组件均启用changeDetection: ChangeDetectionStrategy.OnPush策略，父组件通过@Input向子组件传递数组trainingData：

父组件模板：

<child
   [trainingData]="trainingData"
>             
</child>

子组件通过setter接收输入：

@Input() set trainingData(value: any) {
   // 处理数据的业务逻辑
}

父组件更新数组的方式：

• 添加元素：使用concat返回新数组

trainingData = trainingData.concat(newdata);

• 移除/过滤元素：使用filter返回新数组

trainingData = trainingData.filter(elem => {
    return "some condition";
})

问题现象：除了过滤后数组变为空数组的情况，其他操作都能正常触发子组件的变更检测，但数组清空时子组件无法获取到新的空数组值。

原因分析 #

OnPush模式下，Angular依赖输入属性的引用变化来触发变更检测。当过滤后得到空数组时，如果新的空数组和旧数组的引用相同（比如初始数组就是空数组，或Angular内部复用了空数组引用），Angular会判定输入未发生变化，因此不会通知子组件更新。

解决方案 #

方案1：强制生成新数组引用

确保每次更新数组（包括空数组）都返回全新的引用，避免复用旧引用：

// 过滤时解构生成新数组
trainingData = [...trainingData.filter(elem => {
    return "some condition";
})];

// 或者显式处理空数组场景
const filtered = trainingData.filter(elem => "some condition");
trainingData = filtered.length ? filtered : []; // 新创建的空数组引用

方案2：使用可观察对象传递数据

通过BehaviorSubject管理数组状态，利用async管道自动触发变更检测：
父组件代码：

import { BehaviorSubject } from 'rxjs';

// 初始化BehaviorSubject
private trainingDataSubject = new BehaviorSubject<any[]>([]);
trainingData$ = this.trainingDataSubject.asObservable();

// 添加元素
addData(newdata: any) {
  const current = this.trainingDataSubject.value;
  this.trainingDataSubject.next(current.concat(newdata));
}

// 过滤元素
filterData() {
  const current = this.trainingDataSubject.value;
  const filtered = current.filter(elem => "some condition");
  this.trainingDataSubject.next(filtered);
}

父组件模板：

<child [trainingData]="trainingData$ | async"></child>

方案3：手动触发变更检测

在父组件中注入ChangeDetectorRef，更新数组后手动标记需要检测变更：

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

constructor(private cdr: ChangeDetectorRef) {}

// 过滤更新数组后调用
trainingData = trainingData.filter(elem => "some condition");
this.cdr.markForCheck();

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