角度检查复选框是否从函数/方法内部检查答案

【问题标题】：Angular check if checkbox is check from inside a function/method角度检查复选框是否从函数/方法内部检查
【发布时间】：2017-08-19 20:51:44
【问题描述】：

我正在使用 Angular 4，在我的模板上我有一个复选框和一个 div。

在我的 .ts 文件中，我有 2 个函数。

// html
<input type="checkbox" class="custom-control-input" (change)="function2($event)">

<div (click)="function1()">some text here</div>

这个我有ts文件

// .ts

function1() {
   // check if the checkbox is checked.      
}

function2(event) {
    // do something here
}

从function1我如何检查复选框是否被选中？

【问题讨论】：

【解决方案1】：

在function1()中获取值的一种方法是使用模板变量。

然后您可以执行以下操作：

1。 HTML

<input #input type="checkbox" class="custom-control-input" (change)="function2($event)">

打字稿

@ViewChild('input') private checkInput;
....
function1(){
  console.log(this.checkInput.checked? "it's checked": "it's not checked")
}

2。 HTML

<input #input type="checkbox" class="custom-control-input" (change)="function2($event)">
<div (click)="function1(input)">some text here</div>

打字稿

function1(element){
      console.log(element.checked? "it's checked": "it's not checked")
 }

【讨论】：

Angular 提供了一种直接处理表单的方法是有原因的。实际上它提供了两种方式（模板驱动的表单和响应式表单）并且不要忘记动态创建的表单。我建议您在答案中实际使用其中之一。您的建议将是不切实际的，或者至少难以在更大的形式组件中维护。使用 30 个表单元素，您的方法看起来如何？还是 100 个动态创建的输入？
@lexith，谢谢！在可能的回答中，我说“一种方式”的意思是“一种方式”，我不是故意说“方式”。我会尝试将您的建议添加到我的答案中:)

【解决方案2】：

给复选框添加一个Id属性

 <input id='check1' type="checkbox" class="custom-control-input" (change)="function2($event)">

然后检查function1()中的值

function1() {
  if(document.getElementById('check1').checked) {
       // do something here
  }

【讨论】：