angular - 当以 Angular 选中任何复选框时，是否选中所有复选框？

Question

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

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

  ];