Stile in ngPer loop

Question

Ho un'app che sto sviluppando in Angular 2 (RC1). Il menu deve essere creato dal database. I dati vengono consegnati tramite Web Api in formato JSON. Mi piacerebbe costruire il menu dai dati in modo ricorsivo, per essere sicuro che la profondità del menu non sia un problema.

Il problema si verifica quando desidero aggiungere una classe su una particolare riga del ciclo ngFor e la classe viene aggiunta a tutte le righe anziché una sola a cui desidero.

Il codice sta cercando qualcosa di simile:

sidenav.component.ts

import { Component, Input } from '@angular/core'; 
import { IMenu } from '../../../shared/models/menu.interface'; 
import { MenuComponent } from './menu.component'; 

@Component({ 
    moduleId: module.id, 
    selector: 'sidenav', 
    templateUrl: 'sidenav.component.html', 
    directives: [MenuComponent] 
}) 
export class SidenavComponent { 
    @Input() menu: IMeni[] 
} 

sidenav.component.html

... 
<menu-view [menu]="menu"></menu-view> 
... 

menu.component.ts

import { Component, Input } from '@angular/core'; 
import { IMenu } from '../../../shared/models/menu.interface'; 
@Component({ 
    moduleId: module.id, 
    selector: 'menu-view', 
    templateUrl: 'menu.component.html', 
    directives: [MenuComponent] 
}) 
export class MenuComponent { 
    isSelected: boolean = false; 
    @Input() meni: IMeni[]; 

    onSelect(): void { 
     this.isSelected = !this.isSelected; 
    } 
} 

menu.component.html

<ul> 
    <li *ngFor="let item of menu; let frst=first" 
      class="menu-list" 
      [ngClass]="{'active': 'isSelected', 'active': 'frst'}"> 

     <a [routerLink]="[item.uri]" (click)="onSelect()" > {{item.name}}</a> 

     <meni-view [menu]="item.children"></meni-view> 

    </li> 
</ul> 

Così, quando clicco su genitore tutti i genitori diventano attive, non solo quel particolare uno, quello che sarà il comportamento soddisfacente. Cosa faccio di sbagliato?

Answer 1

Sembra che la variabile isSelected è condivisa in tutto l'elenco. Cambia la variabile per tenere traccia dell'indice.

export class App { 
    menu = [{name: "Item 1", url: "/item1"}, {name: "Item 2", url: "/item2"},{name: "Item 3", url: "/item3"}]; 
    selectedIdx = 0; 

    selectItem(index):void { 
     this.selectedIdx = index; 
    } 
} 

renderlo con

<li *ngFor="let item of menu;let i = index" 
    class="menu-list" [ngClass]="{'active': selectedIdx == i}"> 
    <a (click)="selectItem(i)"> {{item.name}}</a> 
</li> 

Lavorare http://plnkr.co/edit/7aDLNnhS8MQ1mJVfhGRR

Answer 2

Ci sono alcuni ridondanti '. Credo che si desidera associare il valore della proprietà isSelected non la stringa 'isSelected' (stesso con frst)

<li *ngFor="let item of menu; let frst=first" 
     class="menu-list" 
     [ngClass]="{'active': isSelected, 'active': frst}"> 

Answer 3

ho ottenuto una soluzione (ed è facile), quando si ricevono i dati JSON e salvarlo in una variabile del tuo (nel tuo caso è chiamato menu) aggiungi a menu un nuovo campo chiamato classi e renderlo nel modello!

Esempio:

@Input() menu: IMenu[]; 
getMenu(){ 
    this.http.get(url).then(data => { 
    this.menu = data; 
    for(let i = 0; i < this.menu.length; i++) { 
     if(i == indexOfWantedElement){ 
     this.menu[i].classes = "myClass"; 
     continue; 
     } 
     this.menu[i].classes = ""; // others will have no classes 
    } 
    } 
} 

e nel modello si può renderlo easliy

<ul> 
    <li *ngFor="let item of menu;" class="menu-list {{ item.classes }}"> 
    <a [routerLink]="[item.uri]" (click)="onSelect()" >{{item.name}}</a> 
    <meni-view [menu]="item.children"></meni-view> 
    </li> 
</ul> 

Answer 4

Aggiungi #clickState alla riga della *ngFor

<row #clickState> 
    <i class="icon-cloud-download" 
     *ngIf="!clickState.clicked" 
     (click)="clickState.clicked=true"></i> 
    <i class="fa fa-spinner" 
     *ngIf="clickState.clicked 
     (click)="clickState.clicked=false"></i> 
</row>