クリック可能なアイコンで入力フィールドを切り替える

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