Возникли проблемы с Mat-tree

Question

Я следил за угловыми документами о том, как создать компонент mat-tree, но продолжал получать странную ошибку.Попытка поиска в Интернете, но никто не получил ту же проблему.Интересно, кто-нибудь видел эту проблему раньше?Я добавил свой код и ошибку, чтобы она могла помочь в поиске решения.

import { Component, OnInit } from '@angular/core';
import { NestedTreeControl } from '@angular/cdk/tree';
import { MatTreeNestedDataSource } from '@angular/material';

const TREE_DATA = [
    {
        name: 'Land Plane',
        children: [
            { name: 'Piston' },
            { name: 'Jet' },
            { name: 'Turboprop' }
        ]
    },
    {
        name: 'Helicopter',
        children: [
            { name: 'Piston' },
            { name: 'Turboprop' }
        ]
    },
    {
        name: 'Amphibian',
        children: [
            { name: 'Turboprop' }
        ]
    },
    {
        name: 'Tiltwing',
        children: [
            { name: 'Turboprop' }
        ]
    },
    {
        name: 'Gyrocopter',
        children: [
            { name: 'Piston' }
        ]
    },
    {
        name: 'Tower'
    },
    {
        name: 'Gyrocopter'
    },
];

interface ITreeNode {
    name: string;
    children?: ITreeNode[];
}

@Component({
    selector: 'globe-source-facets',
    templateUrl: './globe-source-facets.component.html',
    styleUrls: ['./globe-source-facets.component.scss']
})
export class GlobeSourceFacetsComponent implements OnInit {
    treeControl = new NestedTreeControl<ITreeNode>(node => node.children);
    dataSource = new MatTreeNestedDataSource<ITreeNode>();
  
    constructor() {
        this.dataSource.data = TREE_DATA;
    }

    ngOnInit() {
    }

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

<div class="facets-container">
    <div class="tree-container">
        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
        <!-- This is the tree node template for leaf nodes -->
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
            <li class="mat-tree-node">
            <!-- use a disabled button to provide padding for tree leaf -->
            <button mat-icon-button disabled></button>
            {{node.name}}
            </li>
        </mat-tree-node>
        <!-- This is the tree node template for expandable nodes -->
        <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
            <li>
            <div class="mat-tree-node">
                <button mat-icon-button matTreeNodeToggle
                        [attr.aria-label]="'toggle ' + node.name">
                <mat-icon class="mat-icon-rtl-mirror">
                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
                </button>
                {{node.name}}
            </div>
            <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
                <ng-container matTreeNodeOutlet></ng-container>
            </ul>
            </li>
        </mat-nested-tree-node>
        </mat-tree>
    </div>
    <div class="facet-actions">
        <button mat-button>CLEAR</button>
        <button mat-button color="primary">APPLY</button>
    </div>
</div>

Answer 1

Вы добавили зависимости в свой app.module?

Убедитесь, что они у вас есть, например:

• MatTreeModule
• CdkTreeModule

Надеюсь, это поможет.