Добавить имя элемента элемента click в цикле * ngFor Angular 2

Question

У меня возникла проблема с добавлением имени класса, основанного на индексе цикла Angular 2 ngFor. используя ngДля создания нескольких кнопок, когда я нажимаю кнопку, добавьте класс в определенную кнопку. как тег выберите Для справки Link

<button color="light" *ngFor="let category of categories" [class.tagactive]='stateOfButton' (click)="changeState(i)" let i = index;>{{category}} <span (click)="delete(i)">X</span></button> 

    stateOfButton: boolean = false; 
    categories = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado', 'mango']; 
    changeState(index) { 
     this.stateOfButton = !this.stateOfButton; 
    } 
    delete(index) { 
     this.categories.splice(index, 1); 
    } 

.tagactive { background: #cc3333; color:#fff;} 

Answer 1

Вам нужно array управлять активным или неактивным состоянием кнопки:

//HTML 
<button color="light" *ngFor="let category of categories;let i = index;" [class.tagactive]="stateOfButton[i]" (click)="changeState(i)">{{category}} <span (click)="delete(i)">X</span></button> 


// Component 
categories = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado', 'mango']; 
stateOfButton: boolean[]; 

ngOnInit() { 
    // Creates the array with inactive state initially for all category items. 
    this.stateOfButton = Array(this.categories.length).fill(false); 
} 

changeState(index) { 
    this.stateOfButton[index] = !this.stateOfButton[index]; 
} 
delete(index) { 
    this.categories.splice(index, 1); 
    this.stateOfButton.splice(index, 1); 
}