Angular2: ngFor und bedingte Klasse

Question

Ich versuche eine 2-Level-Navigation in Angular 2 zu implementieren, wo die erste Ebene wie ein Akkordeon funktioniert. Wenn Sie auf die erste Ebene klicken, werden die untergeordneten Elemente angezeigt. Dies geschieht, indem einfach die css-Klasse open zum übergeordneten Element li hinzugefügt wird. Und all das wird dynamisch generiert durch 2 ngFor-Schleifen. Hier

ist das, was ich habe jetzt:

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

Das Problem ist, dass ich eine bekommen „AUSNAHME: nicht zu einer Referenz oder Variablen zuweisen kann“ Fehler auf dem (click)="isOpen = !isOpen" Teil.

Wie kann ich das beheben?

LÖSUNG DANK PierreDuc

Der einfachste Weg ist es, eine Eigenschaft auf die sidebaritem Klasse isOpen genannt hinzuzufügen und zu bearbeiten gerade diese Eigenschaft:

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

Sie können eine Template-Variable zuweisen. Dies kann einige unvorhergesehene Probleme verursachen. Eine Lösung könnte sein, eine isOpen zu Ihrem row Objekt hinzuzufügen:

<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

Sie nicht beliebige Variablen in ngFor erklären können. Nur einige vordefinierte können auf diese Weise zur Verfügung gestellt werden.

Sie benötigen ein Array in Ihrer Komponente, mit dem Sie den Status Öffnen/Schließen jeder Zeile oder nur den Index speichern können, wenn nur eine Zeile gleichzeitig geöffnet sein kann. Das "Array" kann auch ein isOpen Attribut im Objekt row sein.

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

oder

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