Angular Material：mat-tree 不考虑通过 @Input 获得的列表的子项

Question

我正在实施这个 '@angular/material' 示例。问题是当从父组件发送数据列表时，'.html' 中的嵌套没有实现。

例子：

如果我复制对象列表并将其作为常量放在“component.ts”中（

const comments: Comments[] = ['All data']

）我得到正确的嵌套。

但是如果我尝试从“@Input”中获取对象列表，我会得到以下信息。

---

这是我的代码：

评论.component.ts

@Component({
    selector: 'app-comment',
    templateUrl: './comment.component.html',
    styleUrls: ['./comment.component.css'],
})
export class CommentComponent implements OnInit {
    @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() {
        this.dataSource.data = this.comments;
    }
}

评论.interface.ts

export interface Comments {
    by: String;
    id: number;
    parent: number;
    text: String;
    time: number;
    deleted?: boolean;
    dead?: boolean;
    kids?: number[];
    children?: Comments[];
    type: string;
}

我正在尝试显示一个评论列表，其中每个实例本身都包含一个评论子列表。

我将评论列表传递给“@angular/material”的“mat-tree”组件以显示父评论，然后扩展到子评论。

问题是即使数据发送正确，'mat-tree'组件不识别嵌套，只显示父注释。