Angular遍历泛型分页接口数据报NgFor仅支持可迭代对象错误如何解决

泛型参数传参错误，导致类型定义和实际返回结构不匹配，最终将非数组对象传入*ngFor触发报错。
你定义的IPagination<T>接口中，data字段本身已经是T[]数组类型，T应该接收单条数据的类型。但你代码里传入的泛型参数是IUser[]，相当于把单条数据类型定义为IUser数组，最终data字段会被推导为(IUser[])[]二维数组，和后端实际返回结构完全不符。
同时你大概率在模板中直接遍历了users变量本身——users是包含success、pageIndex、count等字段的分页响应对象，本身不是可迭代的数组，自然会触发NgFor的类型错误，报错原文如下：

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

• 修正TS文件中的泛型类型声明
  将两处IPagination<IUser[]>全部替换为IPagination<IUser>，修改后代码如下：

// 泛型传入单条用户数据的接口类型即可
users: IPagination<IUser>;

ngOnInit(): void {
  this.http.get("https://localhost:7105/api/auth/admin/User")
    .subscribe(
      (response: IPagination<IUser>) => {
        this.users = response;
      },
      error => {
        console.log(error);
      }
    )
}

• 修正模板中的遍历目标
  *ngFor不能直接遍历分页对象users，需要遍历该对象下存储实际列表的data字段，建议加可选链避免请求未返回时的空值报错：

<!-- 错误写法：<div *ngFor="let user of users"> -->
<!-- 正确写法 -->
<div *ngFor="let user of users?.data">
  <span>{{user.name}}</span>
  <span>{{user.email}}</span>
  <!-- 其余用户字段按需渲染 -->
</div>

Angular的*ngFor指令仅支持绑定可迭代对象（数组、Set、Map等实现了迭代协议的类型），只要确保传给*ngFor的of后面的值是数组类型，就不会出现该类报错。

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