Angular使用*ngFor遍历Observable数组时触发NG02200错误的问题求助

嗨，我来帮你梳理下这个问题的原因和解决办法：

问题根源 #

从你提供的API返回数据能看到，后端返回的是一个包含plans数组的对象，结构是这样的：

{
  "plans": [
    { "id": 1, "name": "Plan 1", "description": "Super lange Text", "image": "assets/workout_15620186.png", "exercises": 11 },
    { "id": 2, "name": "Plan 2", "description": "Super lange Text", "image": "assets/workout_15620186.png", "exercises": 1 },
    { "id": 3, "name": "Plan 3", "description": "Super lange Text", "image": "assets/workout_15620186.png", "exercises": 1 }
  ]
}

但你的服务代码里直接把响应当成Plan[]数组来处理了，所以实际plans$这个Observable发射的是一个对象，而不是数组。*ngFor只能遍历数组这类可迭代对象，自然就抛出了NG02200错误。

两种解决办法 #

方法一：修改服务，提取数组（推荐）

在服务的fetchAll方法里，通过map操作符从响应对象中取出plans数组，确保Observable最终发射的是数组：

fetchAll(): Observable<Plan[]> {
  return this.http
    .get<{ plans: Plan[] }>(this.url, { responseType: "json" })
    .pipe(
      map(response => response.plans), // 提取出plans数组
      catchError(this.errorHandlerService.handleError<Plan[]>("fetchAll"))
    );
}

这种方式下，你原来的模板代码完全不用改动，*ngFor就能正常遍历数组了。

方法二：修改模板，直接访问对象的plans属性

如果不想改动服务代码，可以在模板里先通过async管道拿到响应对象，再访问它的plans属性，同时用可选链?.避免初始值为null/undefined时的报错：

<ng-container *ngFor="let p of (plans$ | async)?.plans">
  <a [routerLink]="['/plan', p.id]">
    <div class="plan" style="margin-bottom: 10px;">
      <div class="row">
        <div class="col-md-2">
          <img [src]="p.image" style="margin: 5px;"/>
        </div>
        <div class="col-md-10" style="padding-top: 5px;">
          <div class="title">{{ p.name }}</div>
          <div class="description">{{ p.description }}</div>
          <div class="description">Übungen: {{ p.exercises }}</div>
        </div>
      </div>
    </div>
  </a>
</ng-container>

内容来源于stack exchange