版权声明：.net/web/医疗技术的木子纵横的个人分享 https://blog.csdn.net/muzizongheng/article/details/85246922
最近做angular项目中， 需要使用NG-Zorro中的tree， 遇到一些坑。
nz-tree的官方地址：
-
组件的html代码
<nz-tree #nzTree [(ngModel)]="nodes" [nzShowLine]="true" [nzDefaultExpandAll]="false" >
</nz-tree>`
-
组件的ts代码
import { Component, OnInit, ViewChild} from '@angular/core';
import * as _ from 'lodash';
import { NzTreeNode, NzTreeComponent} from 'ng-zorro-antd';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
@Component({
// template: `
// <nz-tree [(ngModel)]="nodes"
// [nzShowLine]="true"
// (nzExpandChange)="mouseAction('expand',$event)"
// (nzDblClick)="mouseAction('dblclick',$event)"
// (nzContextMenu)="mouseAction('contextmenu', $event)"
// (nzClick)="mouseAction('click',$event)">
// </nz-tree>`,
templateUrl: './heroes.component.html'
})
export class HeroesComponent implements OnInit {
heroes: Hero[];
nodes: NzTreeNode[];
@ViewChild('nzTree') nzTree: NzTreeComponent;
constructor(private heroService: HeroService) { }
ngOnInit() {
this.getHeroes();
}
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.refreshTree(heroes));
}
refreshTree(heroes: Hero[]): void {
this.heroes = heroes;
const nodesService = new Array<NzTreeNode>();
heroes.forEach(h => {
nodesService.push(new NzTreeNode({
title: h.name,
key: h.id.toString(),
isLeaf: true,
children: []
}));
});
this.nodes = nodesService;
}
}
3.
在根模块中导入BrowserAnimationsModule， 不然Tree控件在UI上显示不全, 调试会报错： "Error: Found the synthetic property @expandState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application."
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
//...
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule
//...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }