Angular Material TreeTable Component 使用教程
<p><span style="font-family: 微软雅黑">一. 安装</span></p><p><span style="font-family: 微软雅黑">npm i ng-material-treetable --save
</span></p><p>npm i @angular/material @angular/cdk @angular/animations --save
</p><p>
</p><p><span style="font-family: 微软雅黑">二、配置
</span></p><ol><li><span style="font-family: 微软雅黑">在app.module.ts中导入模块
</span></li></ol><p><span style="color: rgba(0, 0, 0, 1)">import { TreetableModule } from 'ng-material-treetable';
</span></p><p> @NgModule({
</p><p> ...
</p><p>imports: [
</p><p> ...
</p><p> TreetableModule
</p><p>],
</p><p>...
</p><p>})
</p><p>export class AppModule { }
</p><ol><li><span style="font-family: 微软雅黑">在template中使用，本文使用app.componet.html
</span></li></ol><p><span style="font-family: 微软雅黑"><treetable ="<span style="color: rgba(192, 0, 0, 1)">arrayOfPerson(yourTreeDataStructure)</span>"></treetable>
</span></p><ol><li><div><span style="font-family: 微软雅黑">导入material的样式，在style.css添加
</span></div><p><span style="font-family: 微软雅黑">@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
</span></p></li><li><div><span style="font-family: 微软雅黑">在app下新建一个<span style="color: rgba(192, 0, 0, 1)">yourDataStructure<span style="color: rgba(0, 0, 0, 1)">.ts定义自己的数据结构，本文新建Person.ts</span>
</span></span></div><p>import { Node } from 'ng-material-treetable';
</p><p>
</p><p>export interface Person {
</p><p> name: string;
</p><p> age: number;
</p><p> married: boolean;
</p><p>}
</p></li><li><div><span style="color: rgba(0, 0, 0, 1); font-family: 微软雅黑">在对应componet中定义自己的树形数据结构
</span></div><p>import { <span style="color: rgba(192, 0, 0, 1)">Person</span>} from './<span style="color: rgba(192, 0, 0, 1)">Person</span>';
</p><p>import { Node } from 'ng-material-treetable';
</p><p>export class AppComponent {
</p><p><span style="font-family: 微软雅黑">…
</span></p><p>
</p><p>
<span style="color: rgba(192, 0, 0, 1)"> arrayOfPerson</span> : Node<<span style="color: rgba(192, 0, 0, 1)">Person</span>>[]= [
</p><p> {
</p><p> value: {
</p><p> name: 'Marry',
</p><p> age: 40,
</p><p> married: true
</p><p> },
</p><p> children: [
</p><p> {
</p><p> value: {
</p><p> name: 'Morry',
</p><p> age: 2,
</p><p> married: false
</p><p> },
</p><p> children: []
</p><p> },
</p><p> {
</p><p> value: {
</p><p> name: 'Bob',
</p><p> age: 22,
</p><p> married: true
</p><p> },
</p><p> children: [
</p><p> {
</p><p> value: {
</p><p> name: 'By',
</p><p> age: 1,
</p><p> married: false
</p><p> },
</p><p> children: []
</p><p> }
</p><p> ]
</p><p> }
</p><p> ]
</p><p> },
</p><p> {
</p><p> value: {
</p><p> name: 'Gray',
</p><p> age: 30,
</p><p> married: true
</p><p> },
</p><p> children: [
</p><p> {
</p><p> value: {
</p><p> name: 'Gorry',
</p><p> age: 4,
</p><p> married: false
</p><p> },
</p><p> children: []
</p><p> },
</p><p> {
</p><p> value: {
</p><p> name: 'Gob',
</p><p> age: 15,
</p><p> married: false
</p><p> },
</p><p> children: []
</p><p> }
</p><p> ]
</p><p> }
</p><p>]
</p><p>}
</p></li></ol><p><span style="color: rgba(0, 0, 0, 1); font-family: 微软雅黑">三、查看效果
</span></p><p><span style="color: rgba(0, 0, 0, 1); font-family: 微软雅黑">Ng serve查看效果
</span></p><p><img src="https://img2018.cnblogs.com/blog/1855561/201911/1855561-20191104173333606-742639448.png" alt="">
</p><p>
</p><p><span style="color: rgba(89, 89, 89, 1); font-size: 9pt"><em>参考 <https://www.npmjs.com/package/ng-material-treetable> </em></span>
</p><p>
</p><p><span style="font-family: 微软雅黑">
</span> </p>
</div>
<div id="MySignature" role="contentinfo">
如果觉得有帮助，欢迎点赞、评论、转发、赞赏~会持续分享自己的一些学习笔记，人生感悟，希望和大家共勉<br><br>
来源：https://www.cnblogs.com/PomeloYe/p/11793258.html
頁:
[1]