Angular 10 中的复选框选中状态

Question

我正在使用 Angular 10。我的 html 文件中有一个复选框。 在我的打字稿文件中，我想查看复选框是否被选中并相应地执行一些操作。 有没有办法让复选框的选中状态像 true 一样被选中，否则为 false？ TIA。

Answer 1

据我所知，我们有两种检查复选框状态的方法：

1. 使用 angular 库，例如：Material UI： https : //material.angular.io/components/checkbox/examples或不同的库。
2. 在 HTML 模板上使用 angular [(ngModel)] ="checked" 的双向绑定

Answer 2

你可以像这样使用双向绑定

html

<input type="checkbox" [(ngModel)]="checked">

ts

checked = false;

Answer 3

您可以使用更改事件来检查状态

<input type="checkbox" (change)="onSelect($event.target.checked)">


onSelect(state:boolean) {
     console.log("Is Checked? ", state)
}

Answer 4

如果您不使用模板表单或响应式表单，

<input type="checkbox" (change)="changeEvent($event.target.checked)">

对于模板表单，

<input type="checkbox" [(ngModel)]='checked' (ngModelChange)="changeEvent()">

对于反应形式，

<input type="checkbox" formControlName='check'>

this.form.get('check').valueChanges
.subscribe((check)=> this.changeEvent())