formControl 和 ngModel答案

【问题标题】：formControl and ngModelformControl 和 ngModel
【发布时间】：2017-11-24 19:40:36
【问题描述】：

我在角度上有以下代码

<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“选中”，当我删除 [(ngModel)]="student.checked" 时，我没有背景颜色改变行为了，但 formControlName “检查”的作品

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

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

【问题讨论】：

标签： angular binding ngmodel

【解决方案1】：

试试这个，使用 ngClass

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

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

【讨论】：

不幸的是，它不起作用，它的行为与 [class.active]="student.checked" 的行为相同，因为我在我的代码中简化了示例[class.active]="student.checked" 我也试过
...
你已经导入 CommonModule
你在 div 和在 checkbox 学生中都学得很好，这就是问题

【解决方案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>

此代码有效

感谢您的帮助。

【讨论】：