Nombre illimité de ngFor imbriqués dans les éléments enfants

Question

J'ai trouvé quelques questions sur les boucles ngFor imbriquées dans Angular2 mais pas ce que je recherche. Je veux afficher les catégories dans une liste. Mon JSON ressemble à ceci :

{
    Categories: [{
        "Title": "Categorie A",
        "Children": [ 
            {
                "Title": "Sub Categorie A",
                "Children": []
            }
        ]
    },{
        "Title": "Categorie B",
        "Children": [ 
            {
                "Title": "Sub Categorie B",
                "Children": [{
                    "Title": "Sub Sub Categorie A",
                    "Children": []
                }]
            }
        ]
    }]
}

La classe C# ressemble à ceci :

public class Child
{
    public string Title { get; set; }
    public List<object> Children { get; set; }
}

public class Category
{
    public string Title { get; set; }
    public List<Child> Children { get; set; }
}

Maintenant, l'astuce est d'obtenir ceci dans une boucle ngFor sans aucune restriction sur la profondeur des enfants.

Answer 1

Je pense que cela serait assez simple avec un composant qui se rend lui-même comme des éléments enfants :

export interface Category {
  Title: string;
  Children: Category[];
}

@Component({
  selector: 'my-category',
  template: `
    <h2>{{ category.Title }}</h2>
    <ul *ngIf="category.Children.length > 0">
      <li *ngFor="let child of category.Children">
        <my-category [category]="child"></my-category>
      </li>
    </ul>
  `
})
export class MyCategoryComponent {
  @Input() category: Category;
}