Los nodos secundarios aparecen en todos los nodos principales. El resultado esperado es que los nodos secundarios aparecerán en un nodo principal específico. También hay una instancia en la que un nodo secundario vuelve a tener un nodo secundario.
Se nos recomendó no usar una biblioteca para este porque antes usábamos la vista de árbol ngx pero cuando la usamos, encontramos dificultades para filtrar el contenido de la vista de árbol cuando usamos otro cuadro de texto de búsqueda.
Lo primero que hice fue usar el bucle FOR para los nodos principales. Utilizo la condición IF para comparar si este nodo padre tiene hijos (en una matriz de objetos). Si se cumple la condición IF, estos nodos secundarios se insertarán en una matriz para ESE NODO PADRE ESPECÍFICO y también devolverán una variable booleana que se usará en * ngIf.
Los datos pasados por this.service.Hierarchy (); es
[{texto: "Parent1", valor: 1, niños: Array (5), comprobado: falso},
{texto: "Parent2", valor: 1, niños: Array (0), comprobado: falso},
{texto: "Parent3", valor: 1, niños: Array (0), comprobado: falso},
{texto: "Parent4", valor: 1, niños: Array (0), comprobado: falso},]
en el archivo .ts
createTree() {
let hierarchy= this.service.Hierarchy(); //data passed
this.treeComponent = hierarchy;
for(let i=0; i<this.treeComponent.length; i++){
//Compare parent if has a children, Example 1 has a children
if(this.treeComponent[i].children.length != 0 ){
for(var children of this.treeComponent[i].children){
//use for ngIF
this.isChildrenAvailable = true;
this.child.push(children);
}
}
}}
en el archivo .html
<ul *ngFor="let item of treeComponent">
<input type="radio">
{{item.text}}
<div *ngIf = "isChildrenAvailable">
<ul *ngFor="let child of child" >
<input type="radio">
{{child.text}}
</ul>
</div>
</ul>
Resultado Esperado:
Padre 1
Niño 1 (hijo del padre 1)
Niño 2 (hijo del padre 1)
`* Niño Niño 1 (hijos de niños 2)
Padre 2
Resultado actual:
Padre 1
Niño 1 (hijo del padre 1)
Niño 2 (hijo del padre 1)
Padre 2
Niño 1 (hijo del padre 1)
Niño 2 (hijo del padre 1)
Padre 3
Niño 1 (hijo del padre 1)
Niño 2 (hijo del padre 1)
simplemente puede iterar sobre la matriz secundaria en la plantilla, si necesita soporte para el anidamiento sin fin, puede usar componentes / plantillas recursivos
<ul>
<li *ngFor="let item of treeComponent">
<input type="radio">{{item.text}}
<div *ngIf="item.children.length">
<ul>
<li *ngFor="let child of item.children">
<input type="radio">{{child.text}}
</li>
</ul>
</div>
</li>
</ul>
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras