Angular子组件无法监听父组件FormArray异步更新问题

该问题由两处典型的写法问题导致：

• 异步逻辑与生命周期时序不匹配：Angular 父子组件初始化流程中，父组件ngOnInit触发后会启动异步API请求，但不会等待请求返回，紧接着就会执行子组件的ngOnInit。子组件在初始化阶段调用memberFilter()时，父组件的API请求还未返回，memberid对应的FormArray还是初始空数组，筛选拿不到有效数据。
• 未监听表单的动态变更：子组件的筛选逻辑仅在初始化阶段执行了一次，没有订阅FormArray的值变化事件，后续父组件API返回、往FormArray中填充成员ID时，子组件不会触发筛选逻辑重跑，视图自然无法更新为预期的选中状态。

在子组件中订阅memberid FormArray的值变更流，数据更新时自动重跑筛选，同时补充组件销毁时的订阅清理逻辑避免内存泄漏：

import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { FormArray, FormGroup } from '@angular/forms';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'hello',
  template: `
  <div class="form-group">
      <p>child component</p>
      <pre> {{memberList | json}}</pre>
  </div>      
     `,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent implements OnInit, OnDestroy {
  private readonly onDestroy$ = new Subject<void>();
  public memberScheduleNotifications = [];
  public memberList = [
    { id: 2, name: 'a' },
    { id: 1, name: 'b' },
    { id: 3, name: 'c' },
    { id: 4, name: 'd' },
  ];
  @Input() myForm: FormGroup;

  ngOnInit() {
    const memberIdArray = this.myForm.controls.memberid as FormArray;
    // 初始化先执行一次筛选，兼容同步赋值场景
    this.memberFilter();
    // 监听FormArray值变化，自动更新筛选结果
    memberIdArray.valueChanges
      .pipe(takeUntil(this.onDestroy$))
      .subscribe(() => this.memberFilter());
  }

  ngOnDestroy(): void {
    // 清理订阅，防止内存泄漏
    this.onDestroy$.next();
    this.onDestroy$.complete();
  }

  memberFilter() {
    const memberIdArray = this.myForm.controls.memberid as FormArray;
    this.memberScheduleNotifications = memberIdArray.value || [];
    this.memberList = this.memberList.map(item => {
      const isSelected = this.memberScheduleNotifications.some(id => id == item.id);
      return { ...item, selected: isSelected };
    });
  }
}

补充优化：原筛选逻辑中未匹配的分支没有显式重置selected状态，多次触发筛选时可能出现选中状态残留，修复版本中统一显式设置selected值，避免状态异常。

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