在 Angular 4 中实现全选复选框的解决方法可以如下所示:
首先,在组件的 HTML 文件中添加一个全选复选框和一组复选框:
全选
然后,在组件的 TypeScript 文件中定义一个数组来存储复选框的状态,并添加一个方法来处理全选复选框的变化和更新其他复选框的状态:
import { Component } from '@angular/core';
@Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.css']
})
export class CheckboxComponent {
checkboxes = [
{ label: '选项1', checked: false },
{ label: '选项2', checked: false },
{ label: '选项3', checked: false }
];
selectAll = false;
selectAllCheckboxes(checked: boolean) {
this.selectAll = checked;
this.checkboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
}
}
这样,当全选复选框的状态发生变化时,selectAllCheckboxes()
方法会被调用,将所有复选框的状态更新为全选复选框的状态。
注意:要使用 ngModel 双向绑定复选框的状态,需要在 app.module.ts
中导入 FormsModule
并将其添加到 imports
数组中。