Angular 12 使用 Observable 获取API数据后双向数据绑定失效问题

问题原因 #

你的数据赋值逻辑已经正常执行，但Angular的变更检测器没有捕获到变量更新，所以页面没有重新渲染。

解决方案 #

方案1：手动触发变更检测（优先尝试） #

修改你的component.ts代码，注入ChangeDetectorRef手动通知变更：

// 顶部导入新增
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

// 构造函数注入
constructor(
  private apiService: PostApiService,
  private cdr: ChangeDetectorRef
) { }

// 修改setItems方法
setItems(item: any) {
  console.log('set Items function');
  console.log(item);
  this.items = item; 
  this.isLoading = false;
  // 新增手动触发变更检测
  this.cdr.detectChanges();
}

如果你的组件或父组件使用了OnPush变更检测策略，把detectChanges()换成markForCheck()即可。

方案2：用NgZone包裹赋值逻辑（如果请求未走Angular HttpClient触发） #

如果你自定义的fetchPosts方法用了原生fetch或者第三方请求库，回调逻辑在Angular的 zone 之外运行，就用这个方案：

// 顶部导入新增
import { Component, OnInit, NgZone } from '@angular/core';

// 构造函数注入
constructor(
  private apiService: PostApiService,
  private zone: NgZone
) { }

// 修改setItems方法
setItems(item: any) {
  console.log('set Items function');
  console.log(item);
  this.zone.run(() => {
    this.items = item; 
    this.isLoading = false;
  })
}

页面加载提示翻译为中文 #

直接修改component.html中对应的代码即可：

<p *ngIf="isLoading">加载中...</p>

额外优化建议 #

• 初始化items为空数组，避免*ngFor遍历undefined抛出异常：public items: any[] = [];
• 可以临时在HTML中加调试代码验证变量更新：<p>items值：{{items | json}}</p> <p>isLoading值：{{isLoading}}</p>
• 检查控制台是否有*ngFor相关的报错，确认返回的result.body是可遍历的数组类型。

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