Angular2：ngFor和條件類

我想在Angular 2中實現2級導航，其中第一級像accordeon一樣工作。如果您點擊第一級，則會顯示子元素。這是通過簡單地將css類open添加到父元素li來完成的。所有這些都是由2 ngFor循環動態生成的。Angular2：ngFor和條件類

這裏是我現在：

<ul> 
    <li *ngFor="let row of sidebaritem; let isOpen = false;" [class.open]="isOpen"> 
     <a (click)="isOpen = !isOpen">{{row.title}}</a> 
     <ul> 
      <li *ngFor="let child of row.children"> 
       <a [routerLink]="child.route">{{child.name}}</a> 
      </li> 
     </ul> 
    </li> 
</ul>

的問題是，我得到一個「例外：不能分配給一個或引用變量」錯誤(click)="isOpen = !isOpen"部分。

我該如何解決這個問題？

解決方案感謝PierreDuc

最簡單的方法是將屬性添加到名爲isOpen的sidebaritem類，只是操縱這個屬性：

class SidebarnaviItem { 
    isOpen: boolean = false; 

    constructor(public name?: string, public route?: any, public children?: SidebarnaviItem[]) {} 
} 

<ul> 
    <li *ngFor="let row of sidebaritem;" [class.open]="row.isOpen"> 
     <a (click)="row.isOpen = !row.isOpen">{{row.title}}</a> 
     <ul> 
      <li *ngFor="let child of row.children"> 
       <a [routerLink]="child.route">{{child.name}}</a> 
      </li> 
     </ul> 
    </li> 
</ul>

來源

2016-07-29 bernhardh

（點擊）需要引用的函數在你的.ts。 –

你不能重新分配模板變量。這可能會導致一些無法預料的問題。一個解決方案是一個isOpen添加到您的row對象：

<ul> 
    <li *ngFor="let row of sidebaritem" [class.open]="row.isOpen"> 
     <a (click)="row.isOpen = !row.isOpen">{{row.title}}</a> 
     <ul> 
      <li *ngFor="let child of row.children"> 
       <a [routerLink]="child.route">{{child.name}}</a> 
      </li> 
     </ul> 
    </li> 
</ul>

來源

2016-07-29 08:27:17 PierreDuc

謝謝！你的想法是最好的。見上面我的完整解決方案。 – bernhardh

不能在ngFor聲明任何變量。只有一些預定義的可以通過這種方式獲得。

在組件中需要一個數組，允許您存儲每行的打開/關閉狀態，或者如果一次只能打開一行，則只需索引。「數組」也可以是row對象中的isOpen屬性。

<ul> 
    <li *ngFor="let row of sidebaritem; let isOpen = false;" [class.open]="row.isOpen"> 
     <a (click)="row.isOpen = !row.isOpen">{{row.title}}</a> 
     <ul> 
      <li *ngFor="let child of row.children"> 
       <a [routerLink]="child.route">{{child.name}}</a> 
      </li> 
     </ul> 
    </li> 
</ul>

或

<ul> 
    <li *ngFor="let row of sidebaritem; let i = index;" [class.open]="isOpen"> 
     <a (click)="rowStates[i].isOpen = !rowStates[i].isOpen">{{row.title}}</a> 
     <ul> 
      <li *ngFor="let child of row.children"> 
       <a [routerLink]="child.route">{{child.name}}</a> 
      </li> 
     </ul> 
    </li> 
</ul>

來源

2016-07-29 08:27:35

謝謝，但pierreDuc更快;） – bernhardh

Angular2：ngFor和條件類

回答

相關問題