如何在离子中使按钮处于默认状态？

Question

我有这个应用程序需要创建一个调查页面。每个调查问题都有 Yes 和 No 按钮作为用户的回答。

因为我是 Ionic 的新手，所以我的问题是，在构建代码之后，是时候检查我的输出了。其中一个按钮已经处于单击状态，如下图所示。这就是我运行我的应用程序后的现状。也就是说，按钮应该是未单击的并且具有白色背景。希望你能帮助我，因为我仍然对使用 Ionic 感到困惑。

这是我使用的代码：

.html -编辑

 <ion-row>
    <ion-col size-md = "6">
      <ion-button (click)="onYesQ1()" [ngClass]="enoughTime ==='Yes' ?'btn-pressed':'btn-unpressed'"  [class]="btn-pressed" fill = "clear">
        <div class = "parentElement">  
      <img src = "{{myYesImage|staticpath}}"/>
    <br><br><p class = "btn-work"><b>Yes</b></p>
        </div>
      </ion-button>
      <ion-button (click)="onNoQ1()" [ngClass]="enoughTime ==='No' ?'btn-pressed':'btn-unpressed'" class="" fill = "clear">
        <div class = "parentElement">
         <img src = "{{myNoImage|staticpath}}"/>
         <br><br><p class = "btn-work"><b>No</b></p>
        </div>
      </ion-button>
    </ion-col>
  </ion-row>

.scss

.btn-pressed{
vertical-align: middle;
width: 126px;
height: 90px;
left: 35.7px;
background: #0E82C1;
border: 1px solid #979797;
box-sizing: border-box;
box-shadow: inset 0px 1px 5px 1px rgba(0, 0, 0, 0.3);
border-radius: 23px;
color: white;

}

.btn-unpressed {
  vertical-align: middle;
  width: 126px;
  height: 90px;
  left: 35.7px;
  border-radius: 25px;
  box-shadow: 0px 0px 19px rgba(0, 0, 0, 0.12), 0px 10px 24px rgba(0, 0, 0, 0.24);
  }

.ts -编辑

        @Input() enoughTime : string = "";

错误：

Answer 1

请按如下所述修改您的代码。它不是离子的问题。问题出在你的逻辑上。

.ts 文件

@Input() enoughTime : string = "";

.html 文件

<ion-row>
    <ion-col size-md = "6">
      <ion-button (click)="onYesQ1()" [ngClass]="enoughTime ==='Yes' ?'btn-pressed':'btn-unpressed'"  [class]="btn-pressed" fill = "clear">
        <div class = "parentElement">  
      <img src = "{{myYesImage|staticpath}}"/>
    <br><br><p class = "btn-work"><b>Yes</b></p>
        </div>
      </ion-button>
      <ion-button (click)="onNoQ1()" [ngClass]="enoughTime ==='No' ?'btn-pressed':'btn-unpressed'" class="" fill = "clear">
        <div class = "parentElement">
         <img src = "{{myNoImage|staticpath}}"/>
         <br><br><p class = "btn-work"><b>No</b></p>
        </div>
      </ion-button>
    </ion-col>
  </ion-row>

如何在离子中使按钮处于默认状态？

How to make button in default state in ionic?

css

angular

ionic-framework

ionic4