Angular使用NgFor遍历数组仅显示首值，如何提取postdata的title和body？

• 组件侧把接口返回的完整响应对象手动包裹成了长度为1的数组赋值给posts，导致*ngFor最多只能遍历1次
• 模板中使用遍历索引i取值p.postdata[i]，仅索引为0时可以拿到有效值，因此只能得到第一个结果

方案1（推荐，逻辑更清晰） #

调整组件逻辑 #

直接提取接口返回值中的postdata数组赋值给posts，不需要额外套一层数组：

posts;

constructor(private getpostservice:GetpostsService) { }

ngOnInit(): void {
  this.getpostservice.getposts().then(data=>{
    this.posts = data.postdata;
    console.log("Inside home",this.posts);
  })
}

调整模板逻辑 #

直接遍历posts数组取对应字段即可，不需要额外使用索引：

<tr *ngFor="let p of posts">
  <td>{{p.title}}</td>
  <td>{{p.body}}</td>
</tr>

方案2（不改动组件逻辑，仅改模板） #

如果不需要拆分响应数据，直接在模板中遍历第一层对象下的postdata数组即可：

<tr *ngFor="let p of posts[0].postdata">
  <td>{{p.title}}</td>
  <td>{{p.body}}</td>
</tr>

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