Angular2 - Dodaj klasę do pozycji po kliknięciu

Question

Mam kilka elementów listy i chciałbym podświetlić każdy po kliknięciu. Jest to łatwe do zrobienia w jQuery lub nawet w JavaScript, ale jestem zagubiony, jeśli chodzi o Angular2.

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

Mój składnik

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"; 
    } 
} 

Nie wiesz, gdzie jest mój błąd lub jeśli używam niewłaściwy sposób

Answer 1

Musisz zrobić tablicę w klasie do przechowywania statusu kulminacyjnym artykuł:

hightlightStatus: Array<boolean> = []; 

Zadeklaruj zmienną lokalną w szablonie związanego z 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

To może pomóc

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

Jeśli jestem zrozumienia pytanie poprawnie, wierzę, można również użyć tynku z angular2 aby uzyskać podobny kod do twojego przykładowego kodu. Dla mojego własnego projektu robiłam następujące:

W moim szablonu mam:

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

W moim komponentu I wtedy:

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); 
     } 

} 

Warto zauważyć jednak, że nie używam to dla listy przedmiotów, jednak uważam, że powinno nadal działać.

Odniesienie do Renderer: Renderer Api Docs

Answer 4

Istnieje wiele sposobów, aby to osiągnąć, i wszystkie są bardzo proste.

Przykłady:

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

tylko przy użyciu HTML

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

Dodaj klasę na kliknięcia i usunąć, jeśli klikniemy na tej samej

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

tylko przy użyciu HTML

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

More info