在Angular 6中使用预选数据选中复选框,可以通过以下步骤实现:
selectedOptions: string[] = ['option1', 'option3'];
<div *ngFor="let option of options">
<input type="checkbox" [(ngModel)]="option.checked" [checked]="selectedOptions.includes(option.value)">
{{ option.label }}
</div>
其中,options是一个包含选项值和标签的数组,例如:
options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
// ...
];
在复选框的ngModel绑定中,使用selectedOptions数组的includes方法来判断当前选项是否在预选数据中,如果是,则设置复选框的checked属性为true,实现预选功能。
onCheckboxChange(option: any) {
if (option.checked) {
this.selectedOptions.push(option.value);
} else {
const index = this.selectedOptions.indexOf(option.value);
if (index >= 0) {
this.selectedOptions.splice(index, 1);
}
}
}
<div *ngFor="let option of options">
<input type="checkbox" [(ngModel)]="option.checked" [checked]="selectedOptions.includes(option.value)" (change)="onCheckboxChange(option)">
{{ option.label }}
</div>
通过以上步骤,就可以在Angular 6中使用预选数据选中复选框了。
企业创新在线学堂
云+社区技术沙龙[第7期]
云+社区技术沙龙[第6期]
T-Day
Elastic 中国开发者大会
云+社区沙龙online第5期[架构演进]
新知
云+社区技术沙龙[第21期]
领取专属 10元无门槛券
手把手带您无忧上云