angular使ng-zorro的nz-tree树控件

最近做angular项目中， 需要使用NG-Zorro中的tree， 遇到一些坑。 

nz-tree的官方地址：

https://ng.ant.design/components/tree/zh

1. 组件的html代码

<nz-tree #nzTree [(ngModel)]="nodes" [nzShowLine]="true" [nzDefaultExpandAll]="false" >

</nz-tree>`

2. 组件的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 { }