Angular 12使用ngFor遍历API返回对象时报错如何解决？

*ngFor 指令仅支持绑定数组等可迭代（Iterable）类型，你从接口拿到的playerData是单个对象，不符合*ngFor的入参要求，因此触发报错。

解决方法1：遍历对象的键/值对（需要展示对象所有属性时使用） #

第一步：修改ts文件，将对象转换为可迭代结构 #

使用Object.entries()把对象转换成[键, 值]格式的二维数组，调整getOne方法：

getOne(){
  this.dataService.getProfile(this.username).subscribe(res=>{
    // 将单个对象转换为可迭代的键值对数组
    this.playerData = Object.entries(res)
  })
}

第二步：调整html模板渲染逻辑 #

<div *ngFor="let [key, value] of playerData">
  {{key}}: {{value}}
</div>

渲染效果示例：

id: 9
name: test
username: testmg
email: test@gmail.com
...

解决方法2：直接渲染单个对象属性（不需要遍历所有属性时使用） #

如果你的需求只是展示单个用户的指定信息，完全不需要使用*ngFor，直接读取对象属性即可，代码更简洁：

<div>用户ID：{{playerData.id}}</div>
<div>用户昵称：{{playerData.name}}</div>
<div>登录账号：{{playerData.username}}</div>
<div>联系邮箱：{{playerData.email}}</div>

这种场景下ts文件的getOne赋值逻辑不需要修改，保持原有写法即可。

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