Angular Material TreeTable Component 使用教程

一. 安装

npm i ng-material-treetable --save

npm i @angular/material @angular/cdk @angular/animations --save

二、配置

1. 在app.module.ts中导入模块

import { TreetableModule } from 'ng-material-treetable';

@NgModule({

...

imports: [

...

TreetableModule

],

...

})

export class AppModule { }

1. 在template中使用，本文使用app.componet.html

<treetable [tree]="arrayOfPerson(yourTreeDataStructure)"></treetable>

1. 导入material的样式，在style.css添加

   @import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');

2. 在app下新建一个yourDataStructure.ts定义自己的数据结构，本文新建Person.ts

   import { Node } from 'ng-material-treetable';

   export interface Person {

   name: string;

   age: number;

   married: boolean;

   }

3. 在对应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>