Angular 12 调用HTTP API返回的数据在HTML页面显示为空如何解决

核心原因 #

该问题由HTTP异步请求的执行逻辑导致：调用getCategories时仅触发了HTTP请求发送，代码不会等待接口返回结果就会继续执行ngOnInit中后续的打印逻辑，此时subscribe内的数组赋值操作还未执行，因此打印出的是空数组。
页面不渲染的原因通常是Angular变更检测未识别到数组内容更新：你使用push方法修改数组时，数组的内存引用没有发生变化，部分场景下Angular的*ngFor指令不会触发重新渲染。 #

具体解决方法 #

1. 优化数组赋值逻辑（推荐） #

放弃遍历push的写法，直接给数组重新赋值，修改引用触发变更检测，将subscribe回调中的数组处理逻辑修改为：

// 原遍历push逻辑删除
this.categories = this.categoriesResponseModel.CATEGORIES;
// 如果需要保留原数组已有内容，可以用扩展运算符合并
// this.categories = [...this.categories, ...this.categoriesResponseModel.CATEGORIES];

2. 手动触发变更检测 #

如果修改赋值逻辑后页面仍未更新，可以手动通知Angular检测视图变化：
首先在组件中注入ChangeDetectorRef：

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

constructor(
  // 其他注入逻辑保留
  private cdr: ChangeDetectorRef
) {}

在数组赋值完成后调用检测方法：

this.categories = this.categoriesResponseModel.CATEGORIES;
this.cdr.markForCheck();

3. 优化异步逻辑写法（如果需要在ngOnInit中使用返回结果） #

如果需要在ngOnInit中拿到接口返回的分类数据做后续处理，可以将异步逻辑封装为Promise，用async/await控制执行顺序：
首先修改getCategories方法：

private getCategories(): Promise<void> {
  return new Promise((resolve, reject) => {
    this.soapService.getCategories().subscribe(
      (res) => {
        res = res.replace(/\n/g, '');
        this.replacement.forEach(item => {
          res = res.replace(item, '');
        });
        this.categoriesResponseModel = JSON.parse(res);
        this.categories = this.categoriesResponseModel.CATEGORIES;
        resolve();
      },
      (err) => {
        console.log(err.message);
        reject(err);
      }
    );
  });
}

修改ngOnInit为异步方法：

async ngOnInit() {
  console.log('# ngOnInit() called');
  await this.getCategories();
  // 此处打印的categories已经是接口返回的完整数据
  console.log(this.categories);
}

额外优化建议 #

你当前服务中responseType: 'text' as 'json'的强转写法不规范，可以直接指定返回类型为字符串，避免类型问题：

public getCategories(): Observable<string> {
  const getCategoriesUrl = 'http://localhost:4300/WS/GetCategories'; 
  return this.http.get(getCategoriesUrl, {
    headers: this.httpOptions, 
    responseType: 'text'
  });
}

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