Question

我有以下输入字段，当点击图标时，输入字段应切换到另一个输入ID和标签名称。再次单击时，它应该再次更改。我目前已经解决了2个单独的* .html文件并在它们之间切换。我现在正在寻找更智能的解决方案。

 <ion-content>
      <div class="item-input-wrapper">
      <ion-item>
        <ion-label stacked>Your name</ion-label>
        <ion-input id="name" type="text"></ion-input>
        <ion-icon ion-button (click)="changeToStudentNumber()"  name="ios-switch"  clear item-right></ion-icon>
      </ion-item>
      </div>
    </ion-content>

第二个html看起来像：

 <ion-content>
      <div class="item-input-wrapper">
      <ion-item>
        <ion-label stacked>Your student number</ion-label>
        <ion-input id="studentnumber" type="text"></ion-input>
        <ion-icon ion-button (click)="changeToName()"  name="ios-switch"  clear item-right></ion-icon>
      </ion-item>
      </div>
    </ion-content>

Answer 1

您是否尝试过使用ngIf？

<ion-content>
  <div class="item-input-wrapper">
  <ion-item *ngIf="useName">
    <ion-label stacked>Your name</ion-label>
    <ion-input #nameInput id="name" type="text"></ion-input>
    <ion-icon ion-button (click)="toggleUseName(nameInput)"  name="ios-switch"  clear item-right></ion-icon>
  </ion-item>
  <ion-item *ngIf="!useName">
    <ion-label stacked>Your student number</ion-label>
    <ion-input #numberInput id="studentnumber" type="text"></ion-input>
    <ion-icon ion-button (click)="toggleUseName(numberInput)"  name="ios-switch"  clear item-right></ion-icon>
  </ion-item>     
  </div>
</ion-content>

toggleUseName()可以像这样翻转控制器上的useName属性;

toggleUserName(inputToFocus) {
    this.useName = !this.useName;
    inputToFocus.setFocus();
}

使用可点击的图标切换输入字段

1 个答案: