Angular Checkbox 不会改变 div 的颜色答案

【问题标题】：Angular Checkbox doesn't change color of a divAngular Checkbox 不会改变 div 的颜色
【发布时间】：2017-06-10 08:58:26
【问题描述】：

我是 Angular 新手，遇到了一个问题。我正在做的是我创建了一个app 组件，在它的模板中有div 包含checkbox 和label，ts 该组件的文件有一个字符串数组和布尔变量。在一个div 上使用ngFor 指令并遍历数组字符串并在标签内打印元素值。此外，每个div 都有一个ngClass 指令，该指令具有布尔变量的表达式，并在变量为真时应用css 类。布尔变量仅在我们选中该复选框并且更改该 div 的背景颜色时才为真。但是为什么它不改变被检查的特定div的背景颜色，它改变了所有divs的颜色。我只想更改仅选中的div 的颜色。

代码：
src/app.ts

@Component({
 selector: 'my-app',
 template: `
  <div class="myDiv" *ngFor = "let elm of my_Arr" [ngClass]={changeClass:state}>
  <input type="checkbox" id="checkdemo" (change)="state=!state">
  <label for="checkdemo">{{elm}}</label>

</div>

 `,
 styles: [`

 .myDiv {
 background-color : white;
 border:1px solid black;
}

.changeClass {
  background-color : red;
}

 `]
})
export class App {
 private state = false;
 private my_Arr: string[] = ['string 1', 'string 2'];
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

见Demo

【问题讨论】：

我创建了一个 plunker plunkr它可以帮助你

标签： angular

【解决方案1】：

原因是您将所有div 的ngClass 与相同的state 绑定，并且还绑定到复选框，当这些复选框中的任何一个值更改时都会影响所有div 的样式。

解决办法是将state改为array，并将数组元素绑定到ngClass和复选框。

见Plunker Demo

【讨论】：