表单控件和 ngModel

Question

我在 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>

这是我的 css

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

在这一行

问题是当复选框被选中时，包含复选框的数组元素的背景颜色变成了我想要的绿色，但是 formControlName "checked" 没有被考虑在内，当我删除 [(ngModel)]="student.checked"我不再有背景颜色更改行为，但 formControlName "checked" 有效

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

想要的行为：我用一个导入的学生构建我的数组，该学生的属性被选中，复选框被选中，当我取消选中它时，绿色背景消失（我的 ngModel [(ngModel)]="student.checked" 与 formControlName "checked")

Answer 1

试试这个，使用 ngClass

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

在div标签里放student，你有student，改一下

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>

此代码有效

感谢您的帮助。

表单控件和 ngModel

formControl and ngModel

binding

ngmodel

angular