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。

Answer 2

你可以给它分配一个[(ngModel)]，并在foo()里面强制它回到假。