Angular嵌套ngFor问题：实现帖子与评论遍历失败咨询

嘿，我来帮你搞定这个问题！看起来你是想实现父组件遍历帖子列表，每个帖子对应的子组件遍历它的评论列表，但现在子组件读不到评论内容，问题出在子组件的遍历对象搞错了。

问题分析 #

父组件里的*ngFor="let item of data"是遍历帖子数组，每个item是单个帖子对象，里面包含comments评论数组。但你子组件里直接写*ngFor="let element of user"，相当于在遍历单个帖子对象的属性（而不是它的评论数组），自然拿不到评论里的element.name。

正确实现步骤 #

1. 子组件正确接收输入属性

首先要确保子组件正确声明接收父组件传递的user（单个帖子对象），在子组件的.ts文件里添加@Input()装饰器：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  // 声明接收父组件传递的单个帖子对象
  @Input() user: any;
}

2. 修改子组件模板，遍历评论数组

把原来遍历user改成遍历user.comments，同时加上可选链操作符?.，避免API异步加载时user未定义导致的报错：

<div *ngFor="let element of user?.comments"> 
  <!-- 部分详情内容 -->
  <a> {{element.name}} </a> 
</div>

3. 父组件代码优化（可选）

父组件里获取API结果后，不用逐个push到data数组，直接赋值更简洁：

// API调用成功后
this.data = this.result; 
// 如果需要深拷贝可以用：this.data = JSON.parse(JSON.stringify(this.result));

这样修改后，子组件就能正确遍历每个帖子的评论数组，显示评论里的name内容啦！

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