隱藏並顯示在點擊離子2

Question

我想隱藏並通過單擊按鈕顯示輸入字段。 任何人都可以請告訴我該怎麼做。

我的代碼如下：

<button ion-button full round >Click </button> 

需要隱藏提前

<ion-input type="text" value=""></ion-input> 

感謝

Answer 1

你可以在你的代碼中使用的變量後面和*ngIf

your.component.html

<button ion-button full round (click)="onButtonClick()">Click</button> 

<ion-input *ngIf="buttonClicked" type="text" value=""></ion-input> 

your.component .ts

export class YourComponent { 

    public buttonClicked: boolean = false; //Whatever you want to initialise it as 

    public onButtonClick() { 

     this.buttonClicked = !this.buttonClicked; 
    } 
} 

這裏有一個plunker例如https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

希望幫助

- 編輯 - 更新普拉克與動畫例如

動畫按鈕，點擊次數可以做到的，但它們之間略有差別，你必須使用放置在組件本身內的角度內置動畫。它還需要組件內的額外導入才能使用它。

在組件設置中，您將動畫標籤和選擇器，模板等放在一起，您可以將樣式更改應用於基於字符串的樣式更改。

animations: [ 
     trigger("showHello", [ 
      state("true", style({ 
       "opacity": 1 
      })), 
      state("false", style({ 
       "opacity": 0 
      })), 
      transition("1 => 0", animate("350ms ease-in")), 
      transition("0 => 1", animate("350ms ease-out")) 
     ]) 
    ] 

然後將它應用於組件HTML中的某些內容，其標籤如下所示。

<div [@showHello]="buttonClicked"> 
    animated hello 
</div> 

這裏的plunker例子再次https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

希望幫助更多

Answer 2

使用ngIf在您的.html顯示和隱藏內容

<button ion-button full round (click)="ngIfCtrl()" >Click </button> 
<ion-input type="text" value="" *ngIf="hide"></ion-input> 

在你的.ts文件

hide:boolean = true; 
ngIfCtrl(){ 
    hide = !this.hide; 
}