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())