angulaire.js - angulairejs2 comment imbriquer plusieurs niveaux de boucles

Question

Dans angulairejs2, *ngFor est une instruction pour implémenter des boucles. En pratique, il a été constaté que plusieurs niveaux de boucles ne peuvent pas être imbriqués.
Si vous souhaitez implémenter plus de 2 boucles imbriquées, comment devez-vous l'implémenter

Answer 1

Vous pouvez implémenter des boucles imbriquées avec plusieurs ngFors. Cela dépend principalement de la manière dont votre format de données correspond.

Format des données :

// demo.json

{
    "nav": [{
        "title": "一级导航1",
        "subs": [
            { "txt": "二级导航1", "link": "#" },
            { "txt": "二级导航2", "link": "#" },
        ]
    }, {
        "title": "一级导航2",
        "subs": [
            { "txt": "二级导航2", "link": "#" },
        ]
    }, {
        "title": "一级导航3",
        "subs": [
            { "txt": "二级导航3", "link": "#1" },
        ]
    }]
}

Exemple de code :

// 导航带子菜单循环例子
<ul>
    <li *ngFor="let nav of navs">  // 这里是外层循环
        <strong>{{nav.title}}</strong>
        <a *ngFor="let sub of nav.subs" href="{{sub.link}}"> // 这里是内层循环
            {{sub.txt}}
        </a>
    </li>
</ul>