Angular2：ngFor条件付きクラス

Question

2レベルナビゲーションを実装しようとしています。最初のレベルはaccordeonのように機能します。最初のレベルをクリックすると、子要素が表示されます。これは、単純にCSSクラスopenを親のli要素に追加することによって行われます。そして、これはすべて2 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

TO

ソリューションTHANKSは、最も簡単な方法は、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> 

Answer 1

あなたはテンプレート変数を再割り当てすることはできません。これは予期せぬ問題を引き起こす可能性があります。解決策は、あなたのrowオブジェクトにisOpenを追加することができます

<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> 

Answer 2

あなたはngFor内の任意の変数を宣言することはできません。この方法では、あらかじめ定義されたものの一部しか利用できません。

コンポーネントには、一度に1つの行だけを開くことができる場合は、各行のオープン/クローズ状態またはインデックスのみを格納できる配列が必要です。 "配列"は、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>