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.