当任何复选框被选中时，所有复选框都会被选中？

Question

我在角度中使用复选框来选择技能集。但是当检查任何复选框时，它会检查所有复选框。如何解决？

这是我在 component.ts 中的技能集：-

skillSet: Array<string> = ['JAVA', 'SQL', 'J2EE', 'SPRING'];

这是 html 中的复选框字段：-

<div class="col-md-6">
     <label for="skills">SkillSet</label><br>
     <label class="ml-2 mt-1" *ngFor ="let skill of skillSet">
     <input type="checkbox" [(ngModel)] = "employee.skills" name="skills" value="{{skill}}"> 
        {{skill}}
     </label>
</div>

这里是 addEmployee.ts :-

export class Employee
{
    employeeId : number;
    firstName : string;
    lastName : string;
    age : number;
    gender : string;
    salary : number;
    department : string;
    state : string;
    city : string;
    address : string;
    email : string;
    skills : Array<{ skillName: string }>;
  }

我想这样显示技能 json :-

"skills": [
            {
                "skillName": "JAVA"
            },
            {
                "skillName": "J2EE"
            }

        ]

Answer 1

这是因为 label for 和 input name 对于每个输入都是相同的。 您需要指定它们。 类似name="skills-{{skill}}"

编辑：请试试这个：

<div class="col-md-6">
     <label for=""skills-{{skill}}" class="ml-2 mt-1" *ngFor ="let skill of skillSet">
     <input type="checkbox" [(ngModel)] = "employee.skills" name="skills-{{skill}}" value="{{skill}}"> 
        {{skill}}
     </label>
</div>

----------

编辑编号。 2：

<div *ngFor="let skill of skills">
  <label for="{{skill.skillName}}" class="ml-2 mt-1" > {{skill.skillName}} </label>
  <input type="checkbox" id="{{skill.skillName}}" value="{{skill.skillName}}">
</div>

和：

skills = [
  {
    skillName: "JAVA"
  },
  {
    skillName: "J2EE"
  }

  ];

Answer 2

你只需要这样做：

 [name]="skill" 

Answer 3

这里：

<!-- inside an *ngFor -->
     <input type="checkbox" [(ngModel)] = "employee.skills" name="skills" value="{{skill}}"> 

每个输入都有相同的ngModel。通过选中/取消选中一个，您正在更新一个常见的 employee.skills 的值。

你可以声明——idk、地图、数组、普通对象？ - 检查技能，并将每个输入绑定到自己的变量：

<input type="checkbox" [(ngModel)] = "employee.skillsDictionary[skill]"