Angular 12使用*ngFor报错仅允许数组和可迭代对象问题求助

这个报错的本质是 *ngFor 指令只能遍历数组、Set、Map等可迭代类型，你当前传入的companies变量实际值是普通对象，不是你声明的Company[]数组类型，所以Angular无法完成视图更新所需的差异比对。

排查步骤 #

1. 校验后端返回的实际数据结构 #

你在HttpClient中声明的泛型Company[]仅为编译时的类型提示，运行时不会校验后端返回的真实结构，90%以上的这类问题都是后端返回了包裹一层的响应对象，而非直接返回数组，常见的响应结构如下：

{
  "code": 200,
  "msg": "请求成功",
  "data": [/* 实际的公司数组 */]
}

你可以先在订阅回调中加打印确认返回结构：

public getCompanies() {
  this.companyService.getCompanies().subscribe((companies) => {
    // 打开浏览器控制台查看输出结果
    console.log('后端返回数据：', companies);
    console.log('是否为数组：', Array.isArray(companies));
    this.companies = companies;
  })
}

如果确认返回的是带包裹的对象，修改赋值逻辑即可（字段名根据实际返回调整）：

this.companies = companies.data;

2. 增加异常兼容逻辑 #

为了避免后端返回异常导致页面报错，可以加数组兜底判断：

// 后端直接返回数组的情况
this.companies = Array.isArray(companies) ? companies : [];
// 后端返回带包裹结构的情况
this.companies = companies && Array.isArray(companies.data) ? companies.data : [];

3. 模板增加兼容判断 #

可以在模板中先判断companies为数组再执行遍历，避免报错，需要先在组件类中暴露Array对象：

// company-list.component 类中增加代码，模板才能调用Array相关方法
public readonly Array = Array;

模板代码调整：

<ng-container *ngIf="Array.isArray(companies)">
  <div *ngFor="let company of companies">
    <app-company-card [company]="company" (selectionChange)="onItemSelected()"></app-company-card>
  </div>
</ng-container>

其他排查方向 #

如果以上步骤确认返回的是数组还是报错，检查是否有其他逻辑中途修改了companies变量的值，把它赋值成了对象类型。

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