在 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')
}

這是工作演示：演示