Angular父组件observable数组属性更新后模板未渲染问题

根因分析 #

由于(account$ | async)?.school可以正常更新，说明account$ Observable的新值发射、Angular异步管道的监听逻辑都是正常的，问题出在person数组的遍历渲染环节，常见原因有两个：

1. 子组件上的*ngIf="person.url"条件不满足，导致子组件被隐藏，视觉上看起来row容器下没有内容
2. 更新person数组时采用了原地修改（push/splice/直接改下标），数组引用未发生变化，*ngFor默认按引用检测变更，没有触发重渲染

解决方案 #

第一步：先做调试定位问题

在父组件HTML中添加调试代码，确认数组和属性值是否符合预期：

<div class="row">
  <!-- 调试用，确认person数组是否有值 -->
  <div>数组长度：{{(account$ | async)?.person?.length}}，数组内容：{{(account$ | async)?.person | json}}</div>
  <div class="col-lg-4" *ngFor="let person of (account$ | async)?.person; let i = index">
    <!-- 调试用，确认每个person的url属性是否存在 -->
    <div>第{{i}}项url：{{person.url}}</div>
    <app-demo [person]="person" *ngIf="person.url"></app-demo>
  </div>
</div>

如果调试发现person.url为空，调整*ngIf的判断条件即可解决问题。

第二步：修复数组变更检测问题

如果调试确认数组和属性都正常，按以下方案修改：

1. 给*ngFor添加trackBy函数
   父组件ts文件中新增方法：

// 入参是数组下标和当前遍历项，返回唯一标识即可，没有唯一ID直接返回index也可
trackByPersonId(index: number, person: Person): number | string {
  return person.id ?? index;
}

修改HTML中的*ngFor语法：

<div class="col-lg-4" *ngFor="let person of (account$ | async)?.person; trackBy: trackByPersonId">

2. 避免原地修改数组，每次更新生成新的数组引用
   在service中更新person数组时，不要直接修改原数组，用展开运算符生成新数组，同时保证整个account对象的引用也更新：

// 错误写法：原地修改，数组引用不变
// account.person.push(newPerson);
// 正确写法：生成新数组，引用变更
account.person = [...account.person, newPerson];
// 发射新的account对象，引用变更触发异步管道检测
this.observeAccount.next({...account});

3. 优化异步管道订阅逻辑，避免多次订阅时序问题
   把account$的异步结果暂存为临时变量，减少重复订阅同时简化语法：

<ng-container *ngIf="account$ | async as account">
  <!-- 原有的school渲染逻辑 -->
  <div>{{account.school}}</div>
  <div class="row">
    <div class="col-lg-4" *ngFor="let person of account.person; trackBy: trackByPersonId">
      <app-demo [person]="person" *ngIf="person.url"></app-demo>
    </div>
  </div>
</ng-container>

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