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

我希望有帮助。