问题描述:如何实现 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
的值,从而动态改变结果的显示。