スタイルを変更する方法* ngFor（ループ）角度2

Question

* ngForでチェックボックスのグループを作っています。それぞれの色をクリックすると変更して、もう一度クリックすると前の色に戻ります：

<div *ngFor="let chekb of amenities" class="checkbox col-md-4 nopadding"> 
<label> 
    <input class="removebox" type="checkbox" (change)="changecheckbox($event)" name="checked" [(ngModel)]="chekb.checked"> 
    {{chekb.title}} 
</label> 
</div> 

成分：

public amenities: checkBoxClass[] = [ 
{title:"pool",value:"pool" ,checked:false}, 
{title:"parking",value:"parking", checked:false} 
] 

実際にはそれらのいずれかは、1つまたは2つ以上であってもよい選択するチェックボックスです。 クリックして色を変更するにはどうすればよいですか？ ありがとうございます。

Answer 1

@component({ 
    ... 
    ... 

/****** added style ******/ 
    style:[ 
    ` 
     mycolor:{background : red}    
    ` 
    ] 

})  


<div *ngFor="let chekb of amenities;let i=index"   //modified 
     class="checkbox col-md-4 nopadding"> 
      <label [class.mycolor]="chekb.checked">   //modified 
       <input class="removebox" 
        type="checkbox" 
        (change)="changecheckbox($event)" 
        name="checked" 
        [(ngModel)]="chekb.checked"> 

          {{chekb.title}} 

      </label> 
</div>