问题描述:如何实现 Angular 的结果随 Checkbox 选中状态改变而改变。
解决思路:绑定 Checkbox 的状态,并监听 Checkbox 状态的改变,根据 Checkbox 状态的值来调整结果的显示。
实现代码:
HTML:
Checkbox
{{result}}
TS:
export class AppComponent {
isChecked: boolean = false;
result: string = '';
onCheckboxChange(event: any) {
this.isChecked = event.target.checked;
this.updateResult();
}
updateResult() {
if (this.isChecked) {
this.result = '选中了 Checkbox';
} else {
this.result = '未选中 Checkbox';
}
}
}
解释说明:
首先在 HTML 中绑定 Checkbox 的状态,并绑定 Checkbox 的状态改变事件 (change),将事件绑定到 onCheckboxChange 方法上。
在 TS 中定义 isChecked 和 result 两个变量,分别用来存储 Checkbox 的状态和结果。
onCheckboxChange 方法用来监听 Checkbox 的状态改变事件,并调用 updateResult 方法来更新结果。
updateResult 方法根据 isChecked 的值来更新 result 的值,从而动态改变结果的显示。