Angular *ngFor遍历数据报Cannot find a differ supporting object错误

• 首先排查变量名匹配问题：你代码中声明的Observable变量名为orders$，但模板中用async管道订阅的是OrderFromService$，二者命名完全不匹配。如果是笔误写错了订阅的变量名，会导致你拿到的结果根本不是预期的Order数组，很可能是未正确赋值的对象类型数据，直接触发遍历报错。
• 其次排查API返回结构与类型声明不匹配问题：你提到Web API返回的是「嵌套数组的对象数组结构」，如果API实际返回的是外层包裹了业务字段的对象（比如{ code: 200, data: Order[], msg: 'success' }这种格式），哪怕你把Observable声明为Observable<Order[]>，Angular也不会自动提取内层数组，你需要在接口请求的pipe中加map操作符提取实际的数组字段，示例代码如下：

this.orders$ = this.http.get('你的API地址').pipe(
  map(res => res.data) // 这里res.data替换为你API返回中实际存数组的字段名
)

• 快速验证方法：在你的<ng-container>内部加一行调试代码，直接打印async返回的结果结构：

<pre>{{ Order | json }}</pre>

运行后查看页面输出的内容，如果是对象包裹数组的结构，直接取对应的数组字段遍历即可，比如你要遍历的数组存在Order的result字段里，就把*ngFor改成*ngFor="let order of Order.result"。

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