使用angular2

Question

我正在使用棱角分明。我有一个输入type"checkbox"和旁边的按钮。单击按钮时，将调用一个方法abc()。我必须在点击按钮时检查是否选中了复选框。

app.component.html

<input type="checkbox" id="chckbx">
<button (click)="abc();" class="btn btn-success">Search </button>

app.component.ts -

abc(){}

Answer 1

解决问题的一个简单方法是手动使用简单的双向绑定

<input type="checkbox" [checked]="isChecked" (change)="isChecked = $event.target.checked" id="chckbx" style="width:30px;height:30px;"  >
<button (click)="abc();" class="btn btn-success" style="height: 30px;padding: 0px 30px">Search </button>

    //in your component use this code
    isChecked = false;

    abc() {
        if (!this.isChecked) {
            console.log('Checkbox cannot be unchecked...');
        }
    }

  

它将解决问题。不过我建议学习两种方法   数据绑定[(ngModel)]方法。但你必须导入一些   模块可以正常使用ngModel。

Answer 2

您可以在click方法中传递复选框的引用。您需要使用#var模板符号：

<input type="checkbox" id="chckbx" #chkbox>
<button (click)="abc(chkbox)" class="btn btn-success">Search</button>


abc(checkbox: HTMLInputElement) {

    console.log(checkbox.checked);  

}

Answer 3

将checkbox值与ngModel绑定。然后在abc()函数中使用它。

HTML：

<input type="checkbox" id="chckbx" style="width:30px;height:30px;" [(ngModel)]="checked" >

<p>
 <button (click)="abc();" class="btn btn-success">Search </button>
</p>

app.component.ts：

checked: boolean = true;

abc(){
    alert(this.checked);
  }

demo

Answer 4

<input type="checkbox" 
    [ngModel]="value"
    (ngModelChange)="changeValue()" 
    id="chckbx">
<button (click)="abc();" class="btn btn-success">Search </button>


changeValue() : void {
    this.value = !this.value;
  }

abc() : void {
  console.log(this.value);
}