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

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(); 
}