用可點擊的圖標切換輸入字段

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