树组件未正确呈现答案

【问题标题】：Tree component is not rendering properly树组件未正确呈现
【发布时间】：2019-08-26 07:06:39
【问题描述】：

角度材质中的嵌套树控件未正确渲染。我使用了这个链接https://material.angular.io/components/tree/examples，但它的渲染与链接中显示的示例不同。

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 { }

【问题讨论】：

您找到解决方案了吗？我也遇到了同样的问题，不胜感激。

标签： angular angular-material

【解决方案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

【讨论】：

【解决方案2】：

如果尚未安装，您必须安装材料图标：

 npm install material-icons@latest

然后你必须将材料图标导入你的styles.css：

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

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

 import {MatIconModule} from '@angular/material/icon';
 imports: [    MatIconModule,...]

【讨论】：