css - 如何更改样式 *ngFor (loop) angular 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}
]

其实就是一个checkbox，可以选择其中的任意一个，可以是一个，也可以是两个，也可以是多个。 我怎样才能通过点击它们来改变它们的颜色？ 非常感谢。

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>