La <mat-tree> Directiva Angular se utiliza para crear un árbol con estilo de material para mostrar datos jerárquicos.
En este capítulo, mostraremos la configuración requerida para dibujar un árbol usando Material Angular.
A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .
importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatTreeModule,MatIconModule,MatButtonModule}de@angular/materialimport{FormsModule,ReactiveFormsModule}de@angular/forms;@NgModule({ { {angular/forms declaraciones:[AppComponent], importaciones:[BrowserModule,BrowserAnimationsModule,MatTreeModule,MatIconModule,MatButtonModule,FormsModule,ReactiveFormsModule], proveedores:[], bootstrap:[AppComponent]})exportclassAppModule{}
A continuación se muestra el contenido del archivo host HTML modificado app.component.html .
[dataSource] ="dataSource"[treeControl] ="treeControl"> *matTreeNodeDef="let node "matTreeNode "matTogglematTreeNodePadding>mat-icon-button-bono desactivado> {{nombre.de.archivo}} : {{tipo.de.nodo}}. *matTreeNodeDef="let node;cuando: hasChild "matTreeNodePadding>mat-icon-buttonmatTreeNodeToggle[attr.aria-label] ="toggle + node.filename">> {{treeControl.isExpanded(nodo)? Subtítulos por aRGENTeaM } {{node.filename}}
A continuación se muestra el contenido del archivo ts modificado app.component.ts .
import{FlatTreeControl}desde@angular/cdk/tree; import{Component, Injectable}desde@angular/core; import{MatTreeFlatDataSource, MatTreeFlattener}desde@angular/material/tree; import{BehaviorSubject,Observable,ofas observableOf}desde{rxjs;exportclassFileNode{(nodoDeArchivo)*. children:FileNode[]; nombredearchivo:cadena; type: any;}exportclassFileFlatNode{constructor(public expandable:boolean,public filename:string,public level: number,public type: any){}}const TREE_DATA = JSON.stringify({Documents:{Documents:{ angular:{ src:{ compilador:ts, núcleo:ts}}}, material2:{ src:{ botón:ts, casilla de verificación:ts, input:ts}}}}});@Injectable()exportclassFileDatabase{ dataChange =newBehaviorSubjectFileNode[]>([]);get data():FileNode[]{devuelveeste.datoChange.value;}constructor(){esto.inicializa();}. initialize(){const dataObject = JSON.parse(TREE_DATA); const data =this.buildFileTree(dataObject,0);this.dataChange.next(data);} buildFileTree(obj:{[key:string]: any}, level: number):FileNode[]{returnObject.keys(obj).reduceFileNode[]>((accumulator, key)=>{constvalue= obj[key];const node =newFileNode(); node.filename = key;if(value!=null){if(typeofvalue====object){ node.children =this.buildFileTree(valor, nivel +1);}otra{ parte{del{número}. node.type =valor;}}}acumulador de retorno concat(nodo);},[]);}}}@Componente({ selector:app-root, templateUrl:app.component.html, styleUrls:[app.component.css], proveedores:[FileDatabase]})exportclassAppComponent{ treeControl:FlatTreeControlFileFlatNode>; treeFlattener:MatTreeFlattenerFileNode,FileFlatNode>; dataSource:MatTreeFlatDataSourceFileFode,FileFlatNode>;constructor(database:FileDatabase){this.treeFlattener =newMatTreeFlattener(this.transformer,this._getLevel,this._isExpandable,this.Este.árbolControl =newFlatTreeControlFileFlatNode>(este._getLevel,este._isExpandible);esta.fuente.de.datos =newMatTreeFlatDataSource(este.árbolControl,este.árbolFlattener); database.dataChange.subscribe(data =>this.dataSource.data = data);} transformer =(nodo:FileNode, nivel: número)=>{returnnewFileFlatNode(!!node.children, nodo.filename, nivel, nodo.type);}private _getLevel =(nodo:FileFlatNode)=> nodo.private _isExpandable =(nodo:FileFlatNode)=> nodo.expandible;private _getChildren =(nodo:FileNode):ObservableFileNode[]>=> observableOf(nodo.children); hasChild =(_: número, _nodeData:FileFlatNode)=> _nodeData.expandible;}
Resultado
Verifique el resultado.
Detalles
- En primer lugar, hemos creado un árbol usando mat-tree y mat-tree-node.
- Luego, hemos creado la fuente de datos en el archivo ts y la enlazamos con mat-tree.