Angular2 - Добавить класс к элементу по клику

Question

У меня есть список элементов списка и хотелось бы выделить каждый из них после его щелчка. Это легко для меня сделать в jQuery или даже JavaScript, но я теряюсь, когда дело доходит до Angular2.

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

Моего компонент

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

Не знаю, где моя ошибка, или если я использую неправильный метод

Answer 1

Вам нужно сделать массив в своем классе, чтобы сохранить статус изюминки пункт:

hightlightStatus: Array<boolean> = []; 

Объявите локальную переменную в шаблоне, связанного с 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

Это может помочь вам

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

Если я понять вопрос правильно, я полагаю, вы можете также использовать рендер от angular2, чтобы получить подобный код к вашему примеру кода. Для моего проекта я сделал следующее:

В моем шаблоне у меня есть:

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

В моем компоненте Я тогда:

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

} 

Стоит отметить, однако, что я не использую это для списка предметов, однако я считаю, что он все равно должен работать.

Ссылка на видеообработки: Renderer Api Docs

Answer 4

Есть много способов для достижения этой цели, и все очень просто.

Примеры:

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

Добавить класс по щелчку и удалить, если мы нажмем на том же

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

только с помощью HTML

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

More info