隐藏并在离子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/ot0b9isc3vhwidddwhhpw？p = preview

希望有帮助

- edit - 更新带有动画示例的plunk

动画按钮点击可以完成，但它们略有不同，您必须使用Angular的内置动画，该动画位于组件本身中。它还需要组件中的其他导入才能使用它。

在组件设置中，您将动画标签与选择器，模板等一起放置，然后根据字符串将样式更改应用于该样式。

   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示例再次

希望有助于一些

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