Angular 16调用API报错：NgFor不支持绑定对象类型数据

问题背景 #

使用 Angular 16.0.1 从指定 API 获取员工数据时，运行项目出现以下错误：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays

以下是原代码实现：

Model #

export interface Emploee {
  employee_name: string;
}

Service #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Emploee } from '../models/emploee.model';

@Injectable({
  providedIn: 'root'
})
export class EmploeeService {
  _url = "https://dummy.restapiexample.com/api/v1/employees"
  constructor(private http:HttpClient) { }
  getEmploee():Observable<Emploee[]>{
    return this.http.get<Emploee[]>(this._url)
  } 
}

组件代码（component.ts） #

import { Component } from '@angular/core';
import { Emploee } from '../models/emploee.model';
import { EmploeeService } from '../services/emploee.service';

@Component({
  selector: 'app-emploee',
  templateUrl: './emploee.component.html',
  styleUrls: ['./emploee.component.scss']
})
export class EmploeeComponent {
  emploee$! : Emploee[];
  ngOnInit() {
    this.fetchEmploee();
  }
  constructor(private emploeeService:EmploeeService){}
  fetchEmploee(){
    this.emploeeService.getEmploee().subscribe(res=> this.emploee$ = res);
  }
}

模板代码（component.html） #

<p *ngFor="let emploee of emploee$">{{emploee.employee_name }}</p>

错误原因 #

API 返回的并非直接的员工数组，而是一个包含 data 字段的对象，data 字段内才是真正的员工列表数组。原代码直接将整个响应对象赋值给数组类型变量，导致 *ngFor 无法遍历非可迭代对象。

解决步骤 #

1. 修正数据模型，适配API响应结构 #

添加响应体接口，明确API返回的结构：

// employee.model.ts
export interface EmployeeResponse {
  data: Employee[];
}

export interface Employee {
  employee_name: string;
}

注：统一拼写（将原Emploee改为Employee，避免拼写错误）。

2. 修改Service，正确解析响应 #

调整Service中的请求方法，返回适配后的响应类型：

// employee.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee, EmployeeResponse } from '../models/employee.model';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  private _url = "https://dummy.restapiexample.com/api/v1/employees";

  constructor(private http: HttpClient) { }

  getEmployees(): Observable<EmployeeResponse> {
    return this.http.get<EmployeeResponse>(this._url);
  }
}

3. 调整组件逻辑，提取员工数组 #

在组件中订阅时，从响应对象中提取data字段的数组：

// employee.component.ts
import { Component } from '@angular/core';
import { Employee } from '../models/employee.model';
import { EmployeeService } from '../services/employee.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent {
  employees!: Employee[];

  ngOnInit() {
    this.fetchEmployees();
  }

  constructor(private employeeService: EmployeeService){}

  fetchEmployees(){
    this.employeeService.getEmployees().subscribe(res => this.employees = res.data);
  }
}

4. 更新模板变量名 #

模板中使用修正后的变量名：

<!-- employee.component.html -->
<p *ngFor="let employee of employees">{{employee.employee_name}}</p>

优化方案：使用Async管道（推荐） #

可以使用Angular的async管道自动管理订阅，避免手动订阅的潜在内存泄漏问题：

组件调整 #

// employee.component.ts
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Employee } from '../models/employee.model';
import { EmployeeService } from '../services/employee.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent {
  employees$!: Observable<Employee[]>;

  ngOnInit() {
    this.employees$ = this.employeeService.getEmployees().pipe(
      map(res => res.data)
    );
  }

  constructor(private employeeService: EmployeeService){}
}

模板调整 #

<!-- employee.component.html -->
<p *ngFor="let employee of employees$ | async">{{employee.employee_name}}</p>

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