formControl和ngModel

Question

I have the following code on angular
<div *ngFor="let student of students.controls; let i=index" [formGroupName]="i" [class.active]="student.checked">
    <!-- The repeated address template -->
    <h4>Student #{{i + 1}}
        <input type="checkbox" formControlName="checked" [(ngModel)]="student.checked">
    </h4>
    <div class="form-group">
        <label class="center-block">First Name:
            <input class="form-control" formControlName="firstName">
        </label>
    </div>
    <div class="form-group">
        <label class="center-block">Last name:
        <input class="form-control" formControlName="lastName">
        </label>
    /div>
</div>

here is my css

`div.active{
  background-color:#CCFFCC !important;

}
`

在这一行     

问题是当检查复选框时，包含复选框的数组元素的背景颜色变为绿色，但我没有考虑formControlName“checked”，当我删除[（ngModel）] =“student时。选中“我没有背景颜色更改行为，但formControlName”已选中“工作

”

实际行为，我使用导入的学生构建我的数组，其中属性已选中true，未检查该框，但是当我检查它时，背景变为绿色

通缉行为：我使用导入的学生构建我的数组，其属性选中为true，框被选中，当我取消选中时，绿色背景消失（我的ngModel [（ngModel）] =“student.checked”被绑定formControlName“已检查”）

Answer 1

试试这个，使用ngClass

<div [ngClass]="{'active':student.checked}">...</div>

在div标签中放学生，你有兴趣，改变它

答案 1 :(得分：0)

我找到了解决方案

<div *ngFor="let student of students.controls; let i=index" 
[formGroupName]="i" [class.active]="student.controls.checked.value>
    <!-- The repeated address template -->
    <h4>Student #{{i + 1}}
        <input type="checkbox" formControlName="checked">
    </h4>

此代码有效

感谢您的帮助。

Answer 2

我找到了解决方案

<div *ngFor="let student of students.controls; let i=index" 
[formGroupName]="i" [class.active]="student.controls.checked.value>
    <!-- The repeated address template -->
    <h4>Student #{{i + 1}}
        <input type="checkbox" formControlName="checked">
    </h4>

此代码有效

感谢您的帮助。