Angular 如何避免选中复选框？

Question

单击复选框时，我会显示一个带有两个按钮的模式，接受和不接受。只有在选中接受按钮时才应选中该复选框。

出于测试目的，我尝试创建此复选框

<input type="checkbox" (change)="foo()" [checked]="false">

期望它执行我的组件的 foo 方法，但从未被检查。问题是它被检查了!我来自 React 背景，这非常令人沮丧。

知道我做错了什么吗？

我也试过

<input type="checkbox" name="show_recurrency" (change)="foo()" [(ngModel)]="checkout.recurrency" id="show_recurrency" />

        foo(e) {
          e.preventDefault();
          console.error('foooooooooooooooo', e);
          this.checkout.recurrency = false;
          return;
        }

问候，

Answer 1

您可以处理click 事件:

<input type="checkbox" (click)="foo($event)" [checked]="false">

并调用 event.preventDefault() 来阻止更改:

foo(event) {
  event.preventDefault();
  console.log("foo was called");
}

参见 this stackblitz用于演示。