Angular2 - Aggiungi classe a elemento al momento del clic

Question

Ho un sacco di voci di elenco e vorrei evidenziare ciascuna una volta che si fa clic. Questo è facile per me fare in jQuery o anche JavaScript ma sono perso quando si tratta di Angular2.

<ul> 
    <li [attr.data-selected]="false" (click)="highlightItem($event)" [class.highlight]="isHighlighted($event)" *ngFor="#item of items"> {{item}} </li> 
</ul> 

mio componente

export class HelloWorld { 
    items = ["pineapples", "apples", "tomatoes", "bread"]; 

    highlightItem(event) { 
     event.target.setAttribute("data-selected", "true"); 
    } 

    isHighlighted(event) { 
     return event.target.getAttribute("data-selected") == "true"; 
    } 
} 

Non so dove il mio errore è o se sto utilizzando un metodo sbagliato

Answer 1

È necessario fare una matrice nella classe per memorizzare lo stato punto culminante di un oggetto:

hightlightStatus: Array<boolean> = []; 

Dichiarare variabile locale nel modello associato con ngFor:

<ul> 
    <li [attr.data-selected]="false" 
     (click)="hightlightStatus[i]=!hightlightStatus[i]" 
     [class.highlight]="hightlightStatus[i]" 
     *ngFor="let item of items, let i = index"> 
     {{item}} 
    </li> 
</ul> 

Answer 2

può aiutare a

export class ContactComponent implements OnInit { 

    values:Object[]; 


    ngOnInit() { 
    this.values=[{name:'Alex',done:false},{name:'Jon',done:false}]; 
    } 

    completed(i:number){ 
    if(this.values[i]) 
     this.values[i]['done']=!this.values[i]['done']; 
    } 

} 

HTML:

<ul> 
    <li *ngFor="let v of values;let i='index'" 
     (click)='completed(i)' 
     [class.checked]="v.done" 
     >  
     {{v.name}}<span class="close">×</span> 
    </li> 
</ul> 

Answer 3

Se sto Comprendere la domanda correttamente, credo che è anche possibile utilizzare il rendering da angular2 per ottenere un codice simile al tuo codice di esempio. Per il mio progetto ho fatto la seguente:

Nel mio modello ho:

<li role="presentation" (click)="userTypeSelect($event)" ><a href="#">Local</a></li> 

Nel mio componente Ho poi:

import {Renderer} from '@angular/core'; 
//other imports 

export class SignupComponent implements OnInit { 

     constructor(private render:Renderer) { } 

     userTypeSelect(event:any){ 
     event.preventDefault() 
     this.render.setElementClass(event.target,"active",false); 
     } 

} 

Vale la pena notare però che non sto usando questo per un elenco di elementi, tuttavia credo che dovrebbe ancora funzionare.

riferimento al renderer di: Renderer Api Docs

Answer 4

Ci sono molti modi per raggiungere questo obiettivo, e tutti sono molto semplici.

Esempi:

<li *ngFor="let n of list" (click)="select(n)" [ngClass]="{active: isActive(n)}"> 
    <a>{{n}}</a> 
</li> 

select(item) { 
     this.selected = item; 
    }; 
    isActive(item) { 
     return this.selected === item; 
    }; 

Solo utilizzando HTML

<li *ngFor="let n of list" [class.active]="clicked === n" 
     (click)="clicked = n"> 
     <a>{{n}}</a> 
    </li> 

Aggiungi classe su clic e rimuovere se si clicca sulla stessa

select(item) { 
    this.selected = (this.selected === item ? null : item); 
}; 

Solo utilizzando HTML

<li *ngFor="let n of list" [class.active]="clicked === n" 
     (click)="clicked = (clicked === n ? null :n)"> 
    <a>{{n}}</a> 
    </li> 

More info