我正在使用angular中的复选框来选择skillSet。但是，任何复选框被选中时，则检查所有复选框。如何解决呢？
这是我在component.ts中的skillSet：-
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"
}
]
这是因为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"
}
];
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句