Html 使用复选框以角度显示或隐藏按钮

我试图根据复选框显示或隐藏按钮。以下是我的HTML代码：

<input class="form-check-input" [(ngModel)]="switchCase" type="checkbox" id="flexSwitchCheckChecked" (change)="toggleButton()"
<button class="btn btn-primary"  *ngIf="!switchCase" [disabled]="!userform.valid">Button A</button>
<button class="btn btn-primary"  *ngIf="switchCase" [disabled]="!userform.valid">Button B</button>

switchCase

的值根据复选框的值而变化，并在控制台中正确记录。但是，按钮不会相应地切换，我只能看到按钮A。我对angular不太熟悉，不确定哪里出了问题。

.html代码

<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked"
                                (change)="toggleButton()">
<button class="btn btn-primary" *ngIf="!switchCase">Button
                                A</button>
<button class="btn btn-primary" *ngIf="switchCase">Button
                                B</button>

---

谢谢这很有效。但是你能告诉我我做错了什么吗？[（ngModel）]=“switchCase”是双向绑定，所以你不需要使用

ngModel

<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked"
                                (change)="toggleButton()">
<button class="btn btn-primary" *ngIf="!switchCase">Button
                                A</button>
<button class="btn btn-primary" *ngIf="switchCase">Button
                                B</button>

public switchCase: boolean = false;
  toggleButton() {
    this.switchCase = !this.switchCase;
  }