Angular13 HttpClient请求数据无法通过async管道在ngFor中渲染

你的代码存在两处核心逻辑错误，直接导致模板无法获取数据：

• 变量赋值和类型声明不匹配：你声明schedule$为Observable<Schedule[]>类型，但subscribe回调中拿到的data是HTTP请求返回后解包完成的普通Schedule[]数组，并非可观察对象，将普通数组赋值给Observable类型变量本身就存在类型错误。
• async管道使用逻辑错误：Angular的async管道接收的输入必须是Observable，它会自动完成订阅、接收数据、组件销毁时取消订阅的全流程，无法直接解析普通数组。

你可以从以下两种方案中任选一种修复，推荐优先使用第一种：

方案一：保留async管道（官方推荐，无需手动管理订阅） #

不需要手动调用subscribe，直接将服务返回的Observable对象赋值给schedule$，后续订阅、数据接收的逻辑全部交给async管道处理即可。
修改calendar.component.ts代码如下：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
// 省略你已有的其他导入，比如Schedule接口、ApiService等

export class CalendarComponent implements OnInit {
  schedule$!: Observable<Schedule[]>;

  ngOnInit(): void {
    // 直接赋值服务返回的Observable，不要调用subscribe
    this.schedule$ = this.apiService.getCalendar();
  }
}

模板文件calendar.component.html原有逻辑基本可用，注意补全未闭合的标签即可：

<ul *ngFor="let evnt of schedule$ | async">
  <li>Working {{evnt.title}}</li>
</ul>

方案二：不使用async管道，手动订阅管理数据 #

如果你更习惯手动控制数据请求流程，就将存储数据的变量改为普通数组类型，模板中移除async管道，记得在组件销毁时取消订阅避免内存泄漏。
修改calendar.component.ts代码如下：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
// 省略你已有的其他导入

export class CalendarComponent implements OnInit, OnDestroy {
  scheduleList: Schedule[] = [];
  private calendarDataSub!: Subscription;

  ngOnInit(): void {
    this.getCalendar();
  }

  public getCalendar(): void {
    this.calendarDataSub = this.apiService.getCalendar().subscribe({
      next: (data: Schedule[]) => {
        this.scheduleList = data;
        console.log('获取到的日历数据：', this.scheduleList);
      },
      error: (err) => {
        console.error('日历数据请求失败：', err);
      }
    })
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，防止内存泄漏
    this.calendarDataSub?.unsubscribe();
  }
}

对应修改calendar.component.html，移除async管道：

<ul *ngFor="let evnt of scheduleList">
  <li>Working {{evnt.title}}</li>
</ul>

额外说明 #

• 你原有代码中subscribe方法外的console.log(this.schedule$)打印undefined是正常现象：HTTP请求是异步执行的，这行代码运行时请求还未返回，回调函数还没执行，自然拿不到赋值后的数据。
• 编写Angular模板时注意标签闭合，你原有代码中<li>标签没有添加对应的</li>闭合标签，虽然部分浏览器可以自动容错，但不符合模板规范，容易引发未知渲染异常。

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