Angular複選框不會改變div的顏色

我是Angular的新手，面臨一個問題。我正在做的是我創建了一個app組件，其模板中有div包含checkbox和label,ts該組件的文件具有字符串和布爾變量的數組。在一個div上使用ngFor指令並遍歷數組的字符串並在標籤內打印元素值。此外，每個div都有一個ngClass指令，該指令具有布爾變量的表達式，並在變量爲true時應用css類。當我們檢查該複選框並且它改變了該div的背景顏色時，布爾變量纔是真實的。但爲什麼不改變被檢查的特定div的背景顏色，它改變了所有divs的顏色。我只想改變只有選中的div的顏色。Angular複選框不會改變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

來源

2017-06-10 Tim Allen

我創建了一個plunker [plunkr（https://plnkr.co/edit/0cjerYbjEMhUIia2UPlS?p=preview）它可以幫助你 – harish

的原因是，你要綁定的所有div的ngClass具有相同state並且還複選框，當任何這些複選框的價值變化會影響所有div的風格。

並且解決方案應該將state更改爲array，並將陣列的元素綁定到ngClass和複選框。

看到Plunker Demo

來源

2017-06-10 09:22:41 Pengyy

Angular複選框不會改變div的顏色

回答

相關問題