要解决“Angular: 自定义复选框不反映模型,但标准复选框可以”的问题,可以使用ngModel指令来处理复选框的双向绑定。以下是一个示例代码,展示如何自定义复选框并使其正确反映模型的值:
在组件的HTML模板中,使用ngModel指令将复选框与模型绑定:
在组件的TypeScript代码中,定义isChecked属性和onCheckboxChange方法:
import { Component } from '@angular/core';
@Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.css']
})
export class CheckboxComponent {
isChecked: boolean = false;
onCheckboxChange(event: any) {
this.isChecked = event.target.checked;
}
}
在上面的示例中,isChecked属性用于存储复选框的状态,初始值为false。当复选框的状态发生变化时,onCheckboxChange方法会更新isChecked属性的值。
这样,无论是自定义复选框还是标准复选框,都可以正确地反映isChecked属性的值。