ngFor內部ngFor - 角2

怎樣在角2 下面使用*ngFor遍歷多維陣列的DOM包裝即時通訊使用：ngFor內部ngFor - 角2

<li *ngFor="let menuName of menuNames" routerLinkActive="active" [ngClass]="{'has-submenu':menuName.submenu?.length>0 }"> 
    <a href="#" [routerLink]="menuName.route" *ngIf="!menuName.enableSM"> <i class="glyphicon {{menuName.icon}}"></i><span class="nav-label">{{menuName.name}}</span> </a> 
    <a href="#" *ngIf="menuName.enableSM"> <i class="glyphicon glyphicon-list-alt"></i> <span class="nav-label">Pages</span> </a> 
    <ul class="list-unstyled" *ngIf="menuName.enableSM"> 
     <li *ngFor="let subMenuName of menuNames['submenu'] let idx = index;"> <a [routerLink]="subMenuName.route">404</a> </li> 
    </ul> 
</li>

和嵌套陣列：

menuNames = [{ 
    name: "Dashboard", 
    route: '/home', 
    icon: "glyphicon-th-large", 
    submenu: [], 
    enableSM: false 
}, { 
    name: "Pages", 
    route: '', 
    icon: "glyphicon-list-alt", 
    submenu: [{ 
     name: "404", 
     route: '/404.html' 
    }, { 
     name: "Signin", 
     route: '/auth/signin' 
    }], 
    enableSM: true 
}];

第二個循環根本不渲染。

來源

2017-02-11 Fahid Mohammad

作爲一個側面說明。可以通過使用'[class.name-of-class] =「expression」'語法來簡化'[ngClass]'。欲瞭解更多詳情，請訪問我的答案[這裏]（http://stackoverflow.com/questions/42168286/how-to-change-the-css-class-in-angular2/42168593#42168593）。 –

你是對的，它處理這種情況的整潔方式:) –

代碼中有拼寫錯誤。其次*ngFor應該是這樣的：

*ngFor="let subMenuName of menuName['submenu']; let idx = index;"

心靈是menuName不menuNames，有一個分號let idx …之前。

來源

2017-02-11 21:52:54

正確，雖然'menuName.submenu'會更好的風格。索引還沒有使用，所以應該刪除。 –

非常感謝您指出錯誤。這只是一個直截了當的信號，我應該在凌晨4點停止編碼：P。 –

ngFor內部ngFor - 角2

回答

相關問題