Angular2 - Tıkladığınızda öğeye sınıf ekle

Question

Çok sayıda liste öğesi var ve tıklandığında her birini vurgulamak istiyorum. Bu jQuery veya JavaScript'te yapmak için kolay ama Angular2 söz konusu olduğunda kaybolacağım.

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

Benim bileşen

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

Değil emin nerede hata veya yanlış bir yöntem

Answer 1

kullanıyorum eğer bir vurgu durumunu saklamak için sınıfta bir dizi yapmak gerekir öğesi:

hightlightStatus: Array<boolean> = []; 

ngFor ile ilişkili şablon yerel değişkeni bildirin:

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

Size

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 yardımcısı olsun

Answer 2

:

düzgün soru anlama am mı

<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

sanırım siz de benzer bir kod almak angular2 dan hale kullanabilirsiniz örnek kodunuza Ben kullanmıyorum o olsa

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

} 

Bu fazlalaştı: Benim şablonunda

Ben: Benim bileşeninde

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

Sonra var benim kendi proje için aşağıdaki yaptım Bu bir liste listesi için, ancak yine de çalışması gerektiğine inanıyorum. Renderer

Referans: Renderer Api Docs

Answer 4

bunu başarmak için birçok yol vardır ve hepsi çok basittir.

Örnekler: Sadece kullanarak

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

html

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

tıklama sınıfı ekleyin ve aynı

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

tıklarsanız kaldırmak Sadece HTML kullanarak

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

More info