Angular Material TreeTable Component 使用教程
一. 安装
npm i ng-material-treetable --save
npm i @angular/material @angular/cdk @angular/animations --save
二、配置
- 在app.module.ts中导入模块
import { TreetableModule } from 'ng-material-treetable';
@NgModule({
...
imports: [
...
TreetableModule
],
...
})
export class AppModule { }
- 在template中使用,本文使用app.componet.html
<treetable [tree]="arrayOfPerson(yourTreeDataStructure)"></treetable>
- 导入material的样式,在style.css添加
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
- 在app下新建一个yourDataStructure.ts定义自己的数据结构,本文新建Person.ts
import { Node } from 'ng-material-treetable';
export interface Person {
name: string;
age: number;
married: boolean;
}
- 在对应componet中定义自己的树形数据结构
import { Person} from './Person';
import { Node } from 'ng-material-treetable';
export class AppComponent {
…
arrayOfPerson : Node<Person>[]= [
{
value: {
name: 'Marry',
age: 40,
married: true
},
children: [
{
value: {
name: 'Morry',
age: 2,
married: false
},
children: []
},
{
value: {
name: 'Bob',
age: 22,
married: true
},
children: [
{
value: {
name: 'By',
age: 1,
married: false
},
children: []
}
]
}
]
},
{
value: {
name: 'Gray',
age: 30,
married: true
},
children: [
{
value: {
name: 'Gorry',
age: 4,
married: false
},
children: []
},
{
value: {
name: 'Gob',
age: 15,
married: false
},
children: []
}
]
}
]
}
三、查看效果
Ng serve查看效果
参考 <https://www.npmjs.com/package/ng-material-treetable>
Angular Material TreeTable Component 使用教程的更多相关文章
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
- Angular Material 教程之布局篇
Angular Material 教程之布局篇 (一) : 布局简介https://segmentfault.com/a/1190000007215707 Angular Material 教程之布局 ...
- Material使用11 核心模块和共享模块、 如何使用@angular/material
1 创建项目 1.1 版本说明 1.2 创建模块 1.2.1 核心模块 该模块只加载一次,主要存放一些核心的组件及服务 ng g m core 1.2.1.1 创建一些核心组件 页眉组件:header ...
- Angular Material design设计
官网: https://material.io/design/ https://meterial.io/components 优秀的Meterial design站点: http://material ...
- [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...
- Angular Material Starter App
介绍 Material Design反映了Google基于Android 5.0 Lollipop操作系统的原生应用UI开发理念,而AngularJS还发起了一个Angular Material ...
- Angular Material & Hello World
前言 Angular Material(下称Material)的组件样式至少是可以满足一般的个人开发需求(我真是毫无设计天赋),也是Angular官方推荐的组件.我们通过用这个UI库来快速实现自己的i ...
- angular material dialog应用
1. 打开弹窗的点击事件 project.component.html <button mat-icon-button class="action-button" (clic ...
- Ng-Matero:基于 Angular Material 搭建的中后台管理框架
前言 目前市面上关于 Angular Material 的后台框架比较少,大多都是收费主题,而且都不太好用. 很多人都说 Material 是一个面向 C 端的框架,其实在使用其它框架做管理系统的时候 ...
- 安装 Angular Material UI
文档 调色板 安装 ng add @angular/material ? Choose a prebuilt theme name, or "custom" for a custo ...
随机推荐
- 备份Cisco交换机设备配置
需求: 备份网络核心设备配置 工具: 1.3CDaemon软件,用于配置TFTP服务器 链接:http://www.china-ccie.com/download/3CDaemon/3CDaemon. ...
- BottomNavigationBar 自定义 底部导航条、以及实现页面切换
一.Flutter BottomNavigationBar 组件 BottomNavigationBar 是底部导航条,可以让我们定义底部 Tab 切换,bottomNavigationBar是 Sc ...
- C++ 11 std::mem_fn
mem_fn 想到member function 成员函数 这还真就是用来调用成员函数的 普通的函数我们通过函数指针可以调用,但对于成员函数的调用稍微复杂一点,需要对象,也即this指针 因为成员函数 ...
- spring缓存创建
/** * * <b>创建缓存</b> * <p> * 创建缓存,若已存在直接返回. * <p> * @param cacheName * @retur ...
- kubernetes强制删除namespace
1.执行命令删除namespace后一直显示Terminating,无法删除namespace [root@k8s-master1 ~]# kubectl get ns NAME STATUS AGE ...
- 睿爸信奥-【临阵磨枪】练习赛(第一场)- T3
目录 题面 题目背景 输入格式 输出格式 思路 code 题面 题目背景 徐老师很胖,长宽高比例为1:1:1,他每次走路都要滚来滚去~~现在假设在一个平面上有 n 个没有公共点公共点的圆.徐老师要从点 ...
- JAVA远程调用 webService
package com.example.demo; import org.apache.cxf.endpoint.Client; import org.apache.cxf.jaxws.endpoin ...
- 当FTP不能满足大文件、海量文件传输时,有没有好的替代方案?
很多企业存在大文件.海量文件的传输需求,如涉及到图像数据采集和回传.海量用户数据收集和同步等业务,一般情况,企业还是会采用传统的FTP传输,或者以此为基础,使用脚本或结合其他办公工具来解决传输需求. ...
- vue编辑修改,点击取消操作时,table内的内容不变
1.父组件内 2.子组件内(使用JSON.parse(JSON.stringify(xxx值))) 进行深拷贝
- iOS开发之时间格式化
//返回当前时间,以GMT为准 NSDate * date = [NSDate date]; NSLog(@"%@", date); //显示当前时间距离1970-01-01 00 ...