Angular7无法遍历嵌套comments数组，树形展示需升级Angular14？

问题根源 #

直接输出tut.comments显示[object Object]是因为你没有遍历嵌套数组，只是把整个数组对象直接转成了字符串。Angular7本身就具备处理嵌套数据和树形结构的能力，无需升级版本。

分步解决方法 #

1. 确保接口定义包含嵌套结构

先明确数据类型，避免类型模糊导致的模板遍历问题：

// 定义评论接口，支持多层嵌套
export interface Comment {
  id: number;
  content: string;
  children?: Comment[]; // 子评论，可选字段
}

// 定义教程接口，包含评论数组
export interface Tutorial {
  id: number;
  title: string;
  content: string;
  comments: Comment[];
}

2. 组件正常获取数据

确保TutorialsService返回的数据符合接口定义：

import { Component, OnInit } from '@angular/core';
import { Tutorial } from './models/tutorial.model';
import { TutorialsService } from './services/tutorials.service';

@Component({
  selector: 'app-tutorial-list',
  templateUrl: './tutorial-list.component.html'
})
export class TutorialListComponent implements OnInit {
  tutorials: Tutorial[] = [];

  constructor(private tutorialsService: TutorialsService) {}

  ngOnInit(): void {
    this.tutorialsService.getTutorials().subscribe(data => {
      this.tutorials = data;
    });
  }
}

3. 模板中嵌套遍历数组（单层评论）

如果只是一层嵌套评论，直接在主模板里嵌套*ngFor即可：

<div *ngFor="let tut of tutorials" class="tutorial-card">
  <h2>{{ tut.title }}</h2>
  <p>{{ tut.content }}</p>

  <div class="comments">
    <h4>评论区</h4>
    <!-- 遍历嵌套的comments数组 -->
    <div *ngFor="let comment of tut.comments" class="comment-item">
      <p>{{ comment.content }}</p>
    </div>
  </div>
</div>

4. 递归组件实现多层树形评论

如果评论是多层嵌套（比如评论下还有子评论），可以用Angular7支持的递归组件来实现树形结构：

• 先创建独立的评论组件：

import { Component, Input } from '@angular/core';
import { Comment } from '../models/tutorial.model';

@Component({
  selector: 'app-comment-node',
  templateUrl: './comment-node.component.html'
})
export class CommentNodeComponent {
  @Input() comment!: Comment; // 接收单个评论数据
}

• 评论组件模板（递归渲染子评论）：

<div class="comment-node">
  <p>{{ comment.content }}</p>
  <!-- 递归渲染子评论，只有存在子评论时才显示 -->
  <div *ngIf="comment.children && comment.children.length > 0" class="child-comments">
    <app-comment-node *ngFor="let child of comment.children" [comment]="child"></app-comment-node>
  </div>
</div>

• 在主模板中调用递归组件：

<div *ngFor="let tut of tutorials" class="tutorial-card">
  <h2>{{ tut.title }}</h2>
  <p>{{ tut.content }}</p>

  <div class="comments">
    <h4>评论区</h4>
    <app-comment-node *ngFor="let comment of tut.comments" [comment]="comment"></app-comment-node>
  </div>
</div>

5. 样式优化（可选）

通过CSS缩进区分层级，让树形结构更直观：

.comment-node {
  margin: 8px 0;
  padding-left: 16px;
  border-left: 2px solid #eee;
}

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