css - Angular 2 : change background color of div when checkbox is checked

Question

我正在尝试设置一个 div 的背景颜色，当它旁边的复选框被选中时。

复选框放置在它们自己的 div 中，我要更改颜色的 div 就在它旁边。

我有一个复选框，它会切换所有其他复选框，如果我切换该复选框，它会切换所有 div 的颜色，但我想单独拥有它以及相邻的 div。

这是我目前所拥有的:

<div class="select-all-checkbox">
  <input type="checkbox" name="all" checked [checked]="isAllSelected" (change)="isSelected = !isSelected">
</div>

<div class="grid" *ngFor="let item of items; let i = index;">
  <div class="selection">
    <input type="checkbox" [checked]="isSelected">
  </div>
  <div class="selected-div" [style.background-color]="isSelected ? '#00B7A8':'' ">
  </div>
</div>

Answer 1

您可以结合使用由索引定义的模板引用和更改事件来通过复选框设置 div 颜色。

HTML

<div class="grid" *ngFor="let item of items; let i = index;">
  <div class="selection">
    <input #i type="checkbox" (change)="!i['checked']">
  </div>
  <div class="selected-div" [style.background-color]="i.checked ? '#00B7A8':'' ">
    test {{i.checked}}
  </div>
</div>