在 Angular 中使用复选框显示或隐藏按钮

Question

我正在尝试根据复选框显示或隐藏按钮。以下是我的 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>

以下是我的 TS 代码：

    toggleButton(){
        console.log("Before : "+this.switchCase);
        this.switchCase = !this.switchCase;
        console.log("After : "+this.switchCase);
    }

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

Answer 1

.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>

.ts代码

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