angulaire créer une boucle récursive dans le modèle pour rendre les commentaires arbre

Question

Salut, je veux rendre les commentaires de mes applications sous forme de commentaires et sa réponse de mais je n'ai pas idée sur la façon de le faire avec mes données:

Mes regards de données comme:

"comments": [ 
    { 
    "id": "30", 
    "content": "Comment 1", 
    "parent": "0", 
    }, 
    { 
    "id": "31", 
    "content": "Comment 2", 
    "parent": "0", 
    }, 
    { 
    "id": "32", 
    "content": "comment 3", 
    "parent": "0", 
    }, 
    { 
    "id": "33", 
    "content": "sub comment 1-1", 
    "parent": "30", 
    }, 
    { 
    "id": "34", 
    "content": "sub comment 2-1", 
    "parent": "31", 
    }, 
    { 
    "id": "35", 
    "content": "sub sub comment 1-1-1", 
    "parent": "33", 
    }, 
    { 
    "id": "36", 
    "content": "sub comment 1-2", 
    "parent": "30", 
    } 
] 

où parent fait référence à l'ID du commentaire que la réponse, il shoold être montré comme:

Comment 1 
    sub comment 1-1 
    sub sub comment 1-1-1 
    sub comment 1-2 
Comment 2 
    sub comment 2-1 
Comment 3 

mais jusqu'à présent je ne dispose que d'une liste i n l'ordre de mes données

Answer 1

Oui, @alexKhymenko a raison. Vous devez convertir votre arbre ordinaire en un arbre hiérarchique. Vous pouvez utiliser pipes pour ce faire. Ensuite, vous pouvez afficher une liste récursive pour afficher votre arborescence hiérarchique.

Tuyau:

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ name: 'converter' }) 
export class ConverterPipe implements PipeTransform { 
    transform(array: any[], id: string = "id", parentId: string = "parent", rootValue: any = "0"): any[] { 
     return this.filterNodes(array, id, parentId, rootValue); 
    } 
    filterNodes(array: any[], id: string, parentId: string, parentValue: any): any[] { 
     return array.filter((node) => { 
      return node[parentId] === parentValue; 
     }).map((node) => { 
      node["items"] = this.filterNodes(array, id, parentId, node[id]); 
      return node; 
     }); 
    } 
} 

Markup:

<ng-template #List let-items> 
    <ul> 
     <li *ngFor="let item of items"> 
      {{item.content}} 
      <ng-container *ngTemplateOutlet="List; context:{ $implicit: item.items }"></ng-container> 
     </li> 
    </ul> 
</ng-template> 
<ng-container *ngTemplateOutlet="List; context:{ $implicit: comments | converter }"></ng-container> 

Voir la plunk qui illustre cela.

Answer 2

1 Vous devez organiser vos données. L'idée principale vous devez itérer sur la liste trouver des parents pour les enfants append quelque chose comme ça

node = {name: 'root', children: [ 
{name: 'a', children: []}, 
{name: 'b', children: []}, 
{name: 'c', children: [ 
    {name: 'd', children: []}, 
    {name: 'e', children: []}, 
    {name: 'f', children: []}, 
    ]}, 
]}; 

Alors cette réponse Checkout Use component in itself recursively to create a tree

@Component({ 
selector: 'tree-node', 
template: ` 
<div>{{node.name}}</div> 
<ul> 
    <li *ngFor="let node of node.children"> 
    <tree-node [node]="node"></tree-node> 
    </li> 
</ul> 
` 
}) 
export class TreeNode { 
    @Input() node; 
} 

Ils utilisent le composant de nœud d'arborescence pour créer arbre.