一. 安裝
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>