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

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

nz-tree的官方地址：

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

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

angular使ng-zorro的nz-tree树控件相关推荐

Bootstrap树控件(Tree控件组件)使用经验分享
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
SAP UI5 应用开发教程之五十六 - SAP UI5 树控件(tree)的开发试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之五十六 - SAP UI5 树控件(tree)的开发
本步骤我们来学习用 SAP UI5 来显示一种在计算机应用程序开发领域非常有用的数据结构:树. 本步骤的实现源代码:https://github.com/wangzixi-diablo/ui5-tut ...
漂亮的JS树控件，自带8个皮肤（dhtmlxTree）
dhtmlxTree(DHTML的扩展树)是一个功能丰富的JavaScript树形菜单 ,允许你轻松地创建有吸引力,快速装载能力下降层次树与跨浏览器兼容性,Ajax支持,在线节点编辑,和拖放的N -. ...
QT中树控件QTreeView开发实例
转自:http://mobile.51cto.com/symbian-268700.htm 本文讲解了QT中树控件QTreeView开发实例,对于QTreeView没有过多的讲解,那么不说废话了,看代 ...
SAP屏幕设计器专题：树控件的使用（九）
在SAP的标准画面中,树控件都是随处可见,在一些特殊的应用中更有用处, 显得专业. 在SE51设计界面里,并没有直观的树控件,只是一个容器,要实现树功能还得在程序中用面向对象的方法实现. 本文就简要介 ...
[原创]FineUI秘密花园（二十四） — 树控件之数据绑定
上一篇文章我们介绍了树控件的基本用法,不过都是通过标签来声明树控件的结构,本章我们会详细讲解如何在后台绑定树控件. 绑定到XmlDocument 下面通过一个简单的例子来看如何将XmlDocument ...
VC树控件的简单使用
//头文件声明 CTreeCtrl m_VersionTree; //在OnInitDialog()添加 CRect rc; GetClientRect(&rc); bool ...
java swing 禁用鼠标事件_Java学习笔记：swing中树控件，设置树节点的图标，按钮美化，鼠标事件，禁止鼠标双击...
树控件: JTree:声明树控件声明树的节点: DefaultMutableTreeNode dd=new DefaultMutableTreeNode("传入树节点名称"); ...
JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...

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

angular使ng-zorro的nz-tree树控件相关推荐

最新文章

热门文章