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");
}

请参阅此 stackblitz的演示。