在Angular 2中,你可以使用NgFor
指令来循环生成多个复选框,并使用ngModel
指令来绑定每个复选框的状态。
下面是一个示例代码,展示了如何使用NgFor
生成多个复选框,并将它们的状态绑定到一个数组中:
{{ item.name }}
在组件类中,你需要定义一个数组items
,并在onChange
方法中处理复选框状态的变化:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
{{ item.name }}
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
items = [
{ name: 'Item 1', checked: false },
{ name: 'Item 2', checked: true },
{ name: 'Item 3', checked: false }
];
onChange(item: any) {
console.log(item.name + ' checked: ' + item.checked);
}
}
在上面的示例中,items
数组中的每个对象都有一个name
属性和一个checked
属性。NgFor
指令用于循环生成多个复选框,并使用ngModel
指令将每个复选框的状态绑定到对应的checked
属性上。change
事件绑定到onChange
方法,当复选框状态发生变化时,会调用该方法并传入相关的对象。
你可以根据实际需求自定义items
数组的内容和onChange
方法的逻辑。