0

我在角度上有以下代码

<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 “选中”绑定）

4

2 回答 2

0

试试这个，使用 ngClass

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

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

于 2017-06-21T19:48:02.647 回答
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>

此代码有效

谢谢您的帮助。

于 2017-06-22T07:24:03.310 回答