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

Zain

我试图根据复选框显示或隐藏按钮。以下是我的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。我是新来的有角度的人,不确定我要去哪里哪里

拉维·阿萨拉(Ravi Ashara)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何通过使用复选框在javascript图形中隐藏和显示我的数据系列

使用单个按钮/复选框显示/隐藏多个div

是否可以基于复选框在Flutter中显示/隐藏textformfields

显示和隐藏每个复选框在同一行中的文本字段

如何使用 angular 中的复选框显示/隐藏表格中的某些字段(例如:status=false)?

Angular - 使用复选框在 Leaflet 地图上显示/删除图层

使用复选框显示隐藏表

使用复选框隐藏/显示

使用GUI中的复选框在可选图中显示动态图例

如何使用复选框在片段内的弹出菜单中显示所选项目?

是否可以使用动态复选框在Angular 7中过滤表中的数据?

如果选中多个复选框,如何显示隐藏按钮

单击复选框时隐藏并显示按钮

复选框在标签内的位置(在悬停或选中时隐藏/显示)

如何根据 Angular 8 中的复选框选择显示和隐藏 div

如何基于Angular JS中的复选框选择显示/隐藏div

添加复选框以在 Woocommerce 中显示/隐藏结帐字段

使用复选框隐藏和显示元素

如何使用复选框显示/隐藏HTML元素

javascript使用复选框显示多个隐藏内容

使用jQuery在复选框事件上显示/隐藏字段

如何使用复选框动态显示/隐藏列

使用复选框隐藏/显示日期选择器

使用jQuery在复选框上显示/隐藏GridView的列

使用多个复选框显示/隐藏内容

使用复选框显示/隐藏多个 <table>

按钮单击复选框在 C# 中检查验证

使用按钮或复选框在 Laravel 5.3 中保存多对多关系的问题

如何使用复选框在同一按钮上的链接之间切换?