не показывать предметы в дереве angular материал 9

Question

Я хочу показать элементы в древовидных элементах в материалах angular 9 и angular.

моя проблема здесь:

я хочу показать 3 или 4 уровень в дереве. Я отправляю запрос на сервер и получаю плоский элемент, и мне нужно преобразовать его в многоуровневую модель.

    intialData(): any {
    this.searchParam.page = 1;
    this.searchParam.rows = 1000;
    this.claimsManagerService.getAll(this.searchParam).subscribe(data => {
        data['records'].forEach(element => {
            let model = {} as FileNode;
            if (element.parentId == null) {
                model.id = element.id;
                model.isChilde = element.isChilde;
                model.parentId = element.parentId;
                model.title = element.title;
                data['records'].forEach(child => {
                    if (child.parentId == element.id) {
                        let childe = {} as FileNode;
                        childe.id = child.id;
                        childe.isChilde = child.isChilde;
                        childe.parentId = child.parentId;
                        childe.title = child.title;
                        if (!model.children) model.children = [] as FileNode[];
                        model.children.push(childe)
                        data['records'].forEach(childs => {
                            if (childs.parentId === child.id) {
                                let childe = {} as TreeNode;
                                childe.id = childs.id;
                                childe.isChilde = childs.isChilde;
                                childe.parentId = child.parentId;
                                childe.title = child.title;
                                let item = model.children.find(x => x.id == childs.parentId);
                                if (!item.children) item.children = [] as TreeNode[];
                                item.children.push(childe);
                            }
                        })
                    }
                })
                this.dataSource.data.push(model)
            }
        })
        return this.dataSource.data
    })
}

я пишу этот код для отображения данных в дереве:

export interface FileNode {
    id: number;
    title: string;
    parentId: number;
    isChilde: boolean;
    children?: FileNode[];
}

export interface TreeNode {
    id: number;
    title: string;
    parentId: number;
    isChilde: boolean;
    level: number;
    expandable: boolean;
}
@Component({
    selector: 'kt-role-tree',
    templateUrl: './tree.component.html',
    styleUrls: ['./tree.component.css'],
    providers: [TreeBuilder]
})
    export class TreeComponent implements OnInit,AfterViewInit {

    @Output() selectedList = new EventEmitter<any>();
    /** The TreeControl controls the expand/collapse state of tree nodes.  */
    treeControl: FlatTreeControl<TreeNode>;

    treeFlattener: MatTreeFlattener<FileNode, TreeNode>;
    searchParam: TableSearch;

    dataSource: MatTreeFlatDataSource<FileNode, TreeNode>;

    treeModel :object;

    constructor(private database: TreeBuilder,
        private claimsManagerService: ClaimsManagerService,
        private cdRef: ChangeDetectorRef,
        private dialog: MatDialog) {
        this.treeFlattener = new MatTreeFlattener(
            this.transformer,
            this.getLevel,
            this.isExpandable,
            this.getChildren);
        this.searchParam = {
            _search: true,
            dateTimeType: 1,
            page: 1,
            rows: 2
        };
        this.treeControl = new FlatTreeControl<TreeNode>(this.getLevel, this.isExpandable);
        this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
        this.intialData();

    }
    ngAfterViewInit(): void {
        this.cdRef.detectChanges(); 
    }
    ngOnInit(): void {

    }

    /** Transform the data to something the tree can read. */
    transformer(node: FileNode, level: number) {
        return {
            id: node.id,
            title: node.title,
            parentId: node.parentId,
            isChilde: node.isChilde,
            level: level,
            expandable: !!node.children
        };
    }

    /** Get the level of the node */
    getLevel(node: TreeNode) {
        return node.level;
    }

    /** Return whether the node is expanded or not. */
    isExpandable(node: TreeNode) {
        return node.expandable;
    };

    /** Get the children for the node. */
    getChildren(node: FileNode) {
        return observableOf(node.children);
    }

    /** Get whether the node has children or not. */
    hasChild(node: TreeNode) {
        return node.expandable;
    }
    delete(id: number): void {
        const title = 'Post Delete';
        const itemName = `Post `;
        const service = this.claimsManagerService;

        const dialogRef = this.dialog.open(DeleteEntityDialogComponent, {
            data: { id, title, itemName, service },
            width: '440px'
        });

        dialogRef.afterClosed().subscribe(res => {
            if (res) {
                this.intialData();
            }

        });
    }



    openAdd(id, title): void {
        let dialogRef;
        if (typeof (id) === 'string') {
            dialogRef = this.dialog.open(ClaimsManagerAddComponent, {
                data: { id: null, isChilde: false, claimName: 'Main' }
            });
        } else {
            dialogRef = this.dialog.open(ClaimsManagerAddComponent, {
                data: { id: id, isChilde: true, claimName: title }
            });
        }

        dialogRef.afterClosed().subscribe(() => {

            this.intialData();

        })
    }

    intialData(): any {
        this.searchParam.page = 1;
        this.searchParam.rows = 1000;
        this.claimsManagerService.getAll(this.searchParam).subscribe(data => {
            data['records'].forEach(element => {
                let model = {} as FileNode;
                if (element.parentId == null) {
                    model.id = element.id;
                    model.isChilde = element.isChilde;
                    model.parentId = element.parentId;
                    model.title = element.title;
                    data['records'].forEach(child => {
                        if (child.parentId == element.id) {
                            let childe = {} as FileNode;
                            childe.id = child.id;
                            childe.isChilde = child.isChilde;
                            childe.parentId = child.parentId;
                            childe.title = child.title;
                            if (!model.children) model.children = [] as FileNode[];
                            model.children.push(childe)
                            data['records'].forEach(childs => {
                                if (childs.parentId === child.id) {
                                    let childe = {} as TreeNode;
                                    childe.id = childs.id;
                                    childe.isChilde = childs.isChilde;
                                    childe.parentId = child.parentId;
                                    childe.title = child.title;
                                    let item = model.children.find(x => x.id == childs.parentId);
                                    if (!item.children) item.children = [] as TreeNode[];
                                    item.children.push(childe);
                                }
                            })
                        }
                    })
                    this.dataSource.data.push(model)
                }
            })
            return this.dataSource.data
        })
    }
}

, и это код html:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
  <button mat-icon-button disabled></button>
  {{node.title}}
</mat-tree-node>

<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
  <button mat-icon-button matTreeNodeToggle
          [attr.aria-label]="'toggle ' + node.title">
    <mat-icon class="mat-icon-rtl-mirror">
      {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
    </mat-icon>
  </button>
  {{node.title}} {{node.id}}
</mat-tree-node>

но это не показывает мне ничего в html.

В чем проблема? как я могу решить эту проблему ????