angular - 使用可点击图标切换输入框

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() 可以像这样翻转 Controller 上的 useName 属性；

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