Angular：ngFor渲染子组件时如何检测父组件对象属性变更

当然可以实现子组件感知对象属性的变更，以下是几种实用方案：

• 替换对象引用（最直接有效）
  ngOnChanges仅会检测输入属性的引用变化，所以修改对象属性时，不要直接修改原对象，而是创建新对象替换原对象。示例代码：

  // 父组件中修改对象属性的逻辑
  const targetIndex = this.objects.findIndex(obj => obj.id === 需要修改的对象ID);
  if (targetIndex !== -1) {
    // 用扩展运算符创建新对象，保留原有属性并更新目标属性
    this.objects[targetIndex] = {
      ...this.objects[targetIndex],
      name: "更新后的名称",
      // 其他需要修改的属性
    };
  }
  

  这样对象引用发生改变，ngOnChanges会触发，子组件也能同步拿到更新后的对象。

• 用ngDoCheck手动检测属性变化
  如果不想修改对象引用，可以在子组件中使用ngDoCheck钩子，手动对比对象属性的变化。示例：

  // 子组件代码
  import { Component, Input, DoCheck, IterableDiffers } from '@angular/core';
  
  @Component({
    selector: 'child-component',
    template: "{{ childObject.name }}"
  })
  export class ChildComponent implements DoCheck {
    @Input() childObject: any;
    private differ: any;
  
    constructor(private differs: IterableDiffers) {
      this.differ = this.differs.find([]).create();
    }
  
    ngDoCheck() {
      const changes = this.differ.diff(this.childObject);
      if (changes) {
        // 这里处理属性变更后的业务逻辑
        console.log("对象属性已更新");
      }
    }
  }
  

  注意：ngDoCheck会在每次变更检测周期执行，避免在此编写重逻辑，防止性能损耗。

• 结合ChangeDetectorRef手动触发变更检测（适配OnPush策略）
  如果子组件设置了changeDetection: ChangeDetectionStrategy.OnPush，可以在父组件修改属性后，手动通知子组件触发变更检测。
  首先在父组件模板中获取子组件引用：

  <ul>
    <li *ngFor="let object of objects">
      <child-component #childComp [childObject]="object"></child-component>
    </li>
  </ul>
  

  父组件代码：

  import { Component, ViewChildren, QueryList } from '@angular/core';
  import { ChildComponent } from './child.component';
  
  @Component({
    selector: 'parent-component',
    templateUrl: './parent.component.html'
  })
  export class ParentComponent {
    objects = [/* 你的对象列表 */];
    @ViewChildren('childComp') childComponents!: QueryList<ChildComponent>;
  
    updateObject() {
      // 直接修改对象属性
      this.objects[0].name = "新名称";
      // 遍历子组件，手动触发变更检测
      this.childComponents.forEach(comp => comp.cdr.detectChanges());
    }
  }
  

  子组件需注入ChangeDetectorRef：

  import { Component, Input, ChangeDetectorRef } from '@angular/core';
  
  @Component({
    selector: 'child-component',
    template: "{{ childObject.name }}",
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class ChildComponent {
    @Input() childObject: any;
  
    constructor(public cdr: ChangeDetectorRef) {}
  }
  

• 通过可观察对象传递数据流
  父组件用BehaviorSubject管理对象列表，子组件订阅数据流，属性变更时父组件推送新值，子组件自动更新。
  父组件代码：

  import { Component } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  
  @Component({
    selector: 'parent-component',
    templateUrl: './parent.component.html'
  })
  export class ParentComponent {
    private objectsSubject = new BehaviorSubject<any[]>([/* 初始对象列表 */]);
    objects$ = this.objectsSubject.asObservable();
  
    updateObjectProperty() {
      const currentList = this.objectsSubject.value;
      const updatedList = [...currentList];
      updatedList[0].name = "更新后的值";
      this.objectsSubject.next(updatedList);
    }
  }
  

  父组件模板：

  <ul>
    <li *ngFor="let object of objects$ | async">
      <child-component [childObject]="object"></child-component>
    </li>
  </ul>
  

  这种方式适合复杂业务场景，能更清晰地控制数据流。

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