显示下一个字段悬停切换按钮

Question

在我的 ionic 应用程序中，我使用了切换按钮。我想在切换时显示下一个字段。并在我关闭切换时隐藏该字段

page.ts

onClickToggle()

pass: any = false;

{

  this.pass = true;

}

page.html

<ion-item>
  <ion-input type="readonly" readonly>Remind me at a location
  </ion-input>
  <ion-toggle color="danger" (click)="onClickToggle()">
  </ion-toggle>
</ion-item>
<div *ngIf="pass == true">
  <ion-item>
    <ion-label>Location
    </ion-label>
    <ion-icon name="arrow-dropright">
    </ion-icon>
  </ion-item>
</div>

Answer 1

这样试试

  <ion-item>
    <ion-toggle [(ngModel)]="isActive" (ionChange)="toggleInput()"></ion-toggle>
  </ion-item>
  <IonInput placeholder="Enter Input" *ngIf="isActive"></IonInput>


 isActive: boolean = false;
 toggleInput() {
    this.isActive = !this.isActive;
 }

Answer 2

如果我理解你的问题，你切换按钮切换你的值

this.pass

真或假；

因此，在 HTML 代码中的 INPUT 中，你输入了如下内容：

<input *ngIf="this.pass"> YOUR INPUT YOU WANT TO SHOW/HIDE </input>

如果这解决了您的问题，请将其写为已解决:)

显示下一个字段悬停切换按钮

Show next field hover toggle button

html

php

ionic-framework

angular

ionic4