Question

我正在使用angular复选框来选择skillSet。但是，当选中任何复选框时，它将选中所有复选框。该如何解决？

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

这里：

formCOntrols

每个输入都具有相同的 <input type="checkbox" [(ngModel)] = "employee.skills" name="skills" value="{{skill}}">。通过选中/取消选中一个，您将更新一个常见的ngModel的值。

您可以声明-idk，映射，数组，普通对象？ -个已检查技能，并将每个输入绑定到其自己的变量：

employee.skills

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

3 个答案:

----------------------