Angular展示数据出现[Object.Object]及空白项问题求助

嘿，这问题我之前也碰到过！核心原因是你的数据结构里，每个数组元素的实际内容都嵌套在一个名为$的属性里，而你之前的模板访问路径没对应上，所以才会出现空白或者[Object.Object]的情况。

下面给你两种可行的修复方案：

方案一：直接在模板中访问嵌套属性 #

既然每个数组项的id和name都藏在$对象里，那我们直接在模板里调整访问路径就行：

<ul *ngFor="let dat of data">
  <li>ID: {{dat.$.id}}</li>
  <li>名称: {{dat.$.name}}</li>
</ul>

这样就能正确读取到每个项里的id和name了。

方案二：在组件中预处理数据（更推荐） #

如果不想在模板里写嵌套的属性路径，我们可以在组件里先把数据结构调整成更直观的形式。比如在你获取到this.data之后，用map方法把每个元素的$属性提取出来：

// 假设你是从接口/服务拿到数据的，在获取完成后执行这段转换
this.data = this.data.map(item => item.$);

处理完之后，数据就变成了直接包含id和name的对象数组，这时候你原来的模板代码就能正常工作了：

<ul *ngFor="let dat of data">
  <li>{{dat.id}}</li>
  <li>{{dat.name}}</li>
</ul>

至于为什么之前会显示10次[Object.Object]，是因为Angular直接渲染数组时，会把每个对象转换成字符串形式，也就是[Object.Object]；而遍历后显示空白则是因为dat.id根本不存在——你要找的id其实在dat.$.id里。

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