2016-11-16 13 views
1

Angular 2 ngForループインデックスに基づいてクラス名を追加する際に問題が発生しています。 ngを使用して複数のボタンを作成する場合、ボタンをクリックすると、特定のボタンのクラスが追加されます。 Linkループ内のクラス名のクリック項目を追加する* ngFor Angular 2

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

だから何?私は働くか、それとも問題ないのですか? Btw、 'let i = index;'は '* ngFor'の中になければなりません。 – martin

+0

ボタンをクリックすると全てのボタンが追加されます。http://www.jqueryscript.net/demo/Simple-Mobile-Friendly-jQuery-Tags-Input-Plugin-Taxonomy/のような色を変更するには特定のボタンが必要です –

答えて

1

あなたの参考のためにselectタグのようにあなたは、ボタンのアクティブまたは非アクティブの状態を管理するために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); 
} 
+0

作業中..まだ特定のボタンを選択していません –

+0

'{{stateOfButton | json}} 'ボタンをクリックすると' stateOfButton'内の値はどうなりますか? – ranakrunal9

+0

ご迷惑をおかけして申し訳ありません –

関連する問題