在Angular 8中实现动态复选框的解决方法可以使用ngFor指令和FormControl来动态生成复选框。
首先,在组件的HTML模板中添加以下代码:
在组件的Typescript文件中,定义checkboxItems数组和对应的FormControl对象:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.css']
})
export class CheckboxComponent {
checkboxItems = [
{ label: 'Item 1', control: new FormControl() },
{ label: 'Item 2', control: new FormControl() },
{ label: 'Item 3', control: new FormControl() }
];
}
最后,确保在组件的模块中导入FormsModule和ReactiveFormsModule:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule
],
// ...
})
export class AppModule { }
这样,你就可以通过checkboxItems数组动态生成复选框,并使用FormControl来跟踪复选框的状态。