web-dev-qa-db-fra.com

Angular2 UL / LI JSON-tree récursif dans ngFor

Je voudrais convertir des arbres JSON en listes non ordonnées dans Angular2. Je connais la solution de directive récursive d'Angular1 et je suis presque sûr que la solution d'Angular2 sera récursive aussi.

    [
        {name:"parent1", subnodes:[]},
        {name:"parent2", 
            subnodes:[
                    {name:"parent2_child1", subnodes:[]}
                 ],
        {name:"parent3", 
            subnodes:[
                    {name:"parent3_child1", 
                        subnodes:[
                                {name:"parent3_child1_child1", subnodes:[]}
                             ]
                    }
                 ]
        }
    ]

à cette liste non ordonnée

<ul>
    <li>parent1</li>
    <li>parent2
        <ul>
            <li>parent2_child1</li>
        </ul>
    </li>
    <li>parent3
        <ul>
            <li>parent3_child1
                <ul>
                    <li>parent3_child1_child1</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

en utilisant Angular2 et ngFor. Quelqu'un a une idée?

jsontreehtml-listsangular
23
user3601578

Empruntant de Post de Torgeir Helgevold , je suis venu avec ce Plunkr . Voici le code:

Composant TreeView:

import {Component, Input} from 'angular2/core';

@Component ({
  selector: 'tree-view',
  directives: [TreeView],
  template: `
  <ul>
    <li *ngFor="#node of treeData">
      {{node.name}}
      <tree-view [treeData]="node.subnodes"></tree-view>
    </li>
  </ul>
  `
})
export class TreeView {
  @Input() treeData: [];
}

Composant d'application:

import {Component} from 'angular2/core';
import {TreeView} from './tree-view.component';

@Component({
    selector: 'my-app',
    directives: [TreeView],
    template: `
    <h1>Tree as UL</h1>
    <tree-view [treeData]="myTree"></tree-view>
    `
})
export class AppComponent { 
  myTree =     [
        {name:"parent1", subnodes:[]},
        {name:"parent2", 
            subnodes:[
                    {name:"parent2_child1", subnodes:[]}
                 ],
        {name:"parent3", 
            subnodes:[
                    {name:"parent3_child1", 
                        subnodes:[
                                {name:"parent3_child1_child1", subnodes:[]}
                             ]
                    }
                 ]
        }
    ];
}
30
Carlos Mermingas

Vous n'avez pas besoin de créer un nouveau tree-view pour ce faire, vous pouvez simplement utiliser ce modèle dans n'importe lequel de vos modèles:

Si votre tableau de données était la propriété publique list de votre composant:

<h1>Angular 2 Recursive List</h1>
<ul>
  <ng-template #recursiveList let-list>
    <li *ngFor="let item of list">
      {{item.name}}
      <ul *ngIf="item.children.length > 0">  <!-- item.subnodes.length -->
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
      </ul>
    </li>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: list }"></ng-container>
</ul>

Voici un Gist .

34
James Bradford