在Angular 6中,可以通过使用ngModel和FormControl来实现动态复选框返回ID数组的功能。下面是一个示例代码:
在组件的HTML文件中,使用ngFor循环来动态生成复选框,并将复选框的值绑定到FormControl中:
在组件的TS文件中,定义复选框的选项和FormControl,并在change事件中更新选中的复选框:
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
@Component({
selector: 'app-checkbox-example',
templateUrl: './checkbox-example.component.html',
styleUrls: ['./checkbox-example.component.css']
})
export class CheckboxExampleComponent {
checkboxForm: FormGroup;
checkboxes: any[] = [
{ id: 1, name: 'Checkbox 1' },
{ id: 2, name: 'Checkbox 2' },
{ id: 3, name: 'Checkbox 3' }
];
selectedCheckboxes: number[] = [];
constructor(private formBuilder: FormBuilder) {
this.checkboxForm = this.formBuilder.group({});
this.checkboxes.forEach((checkbox) => {
this.checkboxForm.addControl(checkbox.id.toString(), new FormControl(false));
});
}
updateSelectedCheckboxes(checkbox: any) {
if (this.checkboxForm.get(checkbox.id.toString()).value) {
this.selectedCheckboxes.push(checkbox.id);
} else {
const index = this.selectedCheckboxes.indexOf(checkbox.id);
if (index > -1) {
this.selectedCheckboxes.splice(index, 1);
}
}
}
}
在这个示例中,复选框选项存储在checkboxes数组中,每个复选框的值绑定到FormControl中。通过在change事件中更新selectedCheckboxes数组,可以跟踪选中的复选框。