Angular12使用*ngFor遍历数组时报NgFor仅支持绑定可迭代对象错误如何解决

这个报错的核心原因是*ngFor指令首次执行绑定时，传入的paymentOptions不是数组类型，而是对象/undefined类型，Angular的默认迭代differ无法处理非迭代类型的变量，因此抛出错误。
你看到页面可以正常渲染，是因为变量在首次渲染完成后被重新赋值为了正确的数组格式，Angular变更检测刷新了视图，但首次绑定触发的错误已经被控制台记录，才会出现「视图正常但控制台报错」的矛盾表现。
常见的触发场景包括：

• 变量初始化时没有赋值为空数组，默认是undefined，后续异步请求（比如接口调用、定时器赋值）完成后才被赋值为数组
• paymentOptions是父组件传入的@Input属性，父组件初始传入的值不是数组，后续才更新为正确的数组格式
• 业务代码中存在误操作，先给paymentOptions赋值了对象类型的值，后续才修正为数组

对应不同场景可选择以下修复方案：

• 初始化变量时直接指定数组类型+默认空数组，保证变量始终为数组类型，这是最稳妥的修复方案：

// 组件ts文件中修改变量定义
paymentOptions: {key: string, value: string}[] = [];

// 后续不管是同步赋值还是异步赋值，都不会改变变量的数组基础类型
this.paymentOptions = [
  {
    "key":"COD",
    "value":"COD"
  },
  {
    "key":"ONLINE",
    "value":"ONLINE"
  }
];

• 如果是父组件传入的@Input属性，给变量设置默认空数组：

@Input() paymentOptions: {key: string, value: string}[] = [];

• 也可以在模板中增加类型判断，只有paymentOptions是数组时才渲染列表，规避首次绑定错误：

<!-- 注：如果要在模板中直接调用Array.isArray，需要在组件类中声明public Array = Array;将全局Array对象暴露给模板 -->
<ng-container *ngIf="Array.isArray(paymentOptions)">
  <div *ngFor="let obj of paymentOptions">
    <input type="checkbox" value = "{{obj.value}}">{{obj.key}}
  </div>
</ng-container>

• 排查所有涉及paymentOptions赋值的逻辑，避免出现将对象赋值给该变量的操作，比如接口返回值处理时，不要把整个响应体赋值给paymentOptions，要取响应体中对应的数组字段。

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