Question

有角材质中的嵌套树控件无法正确渲染。我使用了此链接https://material.angular.io/components/tree/examples，但其呈现方式与链接中显示的示例不同。

Tree view rendered in browser

app.component.html文件包含用于树形视图的html代码

app.component.html文件

<div class="container-fluid">
  <div class="row">
     <div class="col-md-4">

      <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="col-md-8">
         <p> Drop Area </p>
     </div>
  </div>
</div>

app.component.ts文件包含用于数据源的打字稿代码和其他树形视图初始化代码。

app.component.ts文件

import { NestedTreeControl } from '@angular/cdk/tree';
import { Component } from '@angular/core';
import { MatTreeNestedDataSource } from '@angular/material/tree';
import { TREE_DATA, FoodNode }  from '../../src/dataSource';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FPGA-App-new';
  treeControl = new NestedTreeControl<FoodNode>(node => node.children);
  dataSource = new MatTreeNestedDataSource<FoodNode>();

  constructor() {
    this.dataSource.data = TREE_DATA;
  }

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

app.module.ts文件包含相关的导入模块

app.module.ts文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatTreeModule, MatIconModule, MatButtonModule } from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatTreeModule, MatIconModule, MatButtonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我遇到了类似的问题，即我的树像您的树一样被渲染。起初，我以为MatTreeModule存在问题，但是发现我需要在组件的样式文件中包含适当的CSS。

解决方法是确保应用以下样式：

.example-tree-invisible {
  display: none;
}

.example-tree ul,
.example-tree li {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: none;
}

来源：https://stackblitz.com/angular/earqaagjdamd

Answer 2

如果尚未安装，则必须安装 material-icons：

:query

那么你必须将 material-icons 导入到你的 style.css 中：

 npm install material-icons@latest

然后在你的 app.module.ts 中导入 MatIconModule：

@import "~material-icons/iconfont/material-icons.css";

树组件无法正确呈现

2 个答案: