Angular Material mat-tree接收@Input数据时无法识别嵌套结构问题

针对你遇到的「通过@Input传递数据时嵌套树只显示父级，常量定义则正常」的问题，可从以下几个方向排查修复：

1. 用ngOnChanges替代ngOnInit更新数据源 #

ngOnInit仅在组件初始化时执行一次，如果父组件的评论数据是异步加载（比如从接口获取），ngOnInit执行时数据可能还未就绪，导致数据源赋值不完整。通过监听输入属性变化来更新：

修改comment.component.ts，实现OnChanges接口并添加监听逻辑：

import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
// 其他导入保持不变

@Component({
    selector: 'app-comment',
    templateUrl: './comment.component.html',
    styleUrls: ['./comment.component.css'],
})
export class CommentComponent implements OnInit, OnChanges {
    @Input() comments!: Comments[];

    treeControl = new NestedTreeControl<Comments>(node => node.children);
    dataSource = new MatTreeNestedDataSource<Comments>();

    hasChild = (_: number, node: Comments) =>
        !!node.children && node.children.length > 0;

    ngOnInit() {
        // 初始化时如果已有数据，先赋值一次
        if (this.comments) {
            this.dataSource.data = this.comments;
        }
    }

    ngOnChanges(changes: SimpleChanges) {
        // 当comments输入发生变化时，更新数据源
        if (changes['comments'] && changes['comments'].currentValue) {
            this.dataSource.data = changes['comments'].currentValue;
        }
    }
}

2. 验证输入数据的children结构完整性 #

虽然你确认数据已传递，但要确保父组件传入的comments中，父节点的children属性是非空数组（而非undefined/null）。可在ngOnChanges中添加日志排查：

ngOnChanges(changes: SimpleChanges) {
    if (changes['comments']) {
        const currentData = changes['comments'].currentValue;
        console.log('当前传入的评论数据:', currentData);
        if (currentData?.length) {
            console.log('第一个父节点的子评论:', currentData[0].children);
        }
    }
}

如果日志显示children为undefined，说明父组件传递的数据未正确构建嵌套结构，需要先在父组件中处理好children的关联逻辑。

3. 确保输入数据的引用不可变性 #

如果父组件是直接修改原数组（比如push/splice）来更新评论，Angular的变更检测可能无法感知到变化。父组件应通过生成新数组引用的方式更新数据：

// 父组件中更新评论列表的示例
this.comments = [...this.comments, newComment]; // 用扩展运算符生成新数组

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