在 Angular 中选中/取消选中复选框时如何调用不同的方法？

Question

在我的组件 class 中，我有两种方法，一种用于选中复选框，另一种用于未选中复选框。 如何在我的模板文件中定义这种行为？ 这是我期望具有功能的伪代码，尽管经过一段时间查看 web 我没有看到任何这样的选项并且似乎无法理解应该如何完成

<input type="checkbox" *when checked*="method1()" *when unchecked*="method2()">

我应该如何实现这个？

Answer 1

您可以按如下方式实现：

在component.html中。html：

<input type="checkbox" [(ngModel)]="isChecked" (change)="handleChange()" />

在component.ts中：

handleChange() {
    console.log(this.isChecked);
    if (this.isChecked) {
      this.checkedTrue();
    } else {
      this.checkedFalse();
    }

  }

  checkedTrue() {
    console.log('checked')
  }

  checkedFalse() {
    console.log('unchecked')
}

这是工作演示：演示