单击并隐藏并显示离子2 [英] Hide and show on click in the ionic 2

问题描述

我想通过单击按钮来隐藏和显示输入字段. 谁能告诉我该怎么做.

I Want to hide and show the input field by clicking a button. can anyone please tell me how to do.

我的代码如下:

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

需要隐藏

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

预先感谢

推荐答案

您可以在代码后面使用变量，并在*ngIf

You could use a variable in your code behind and an *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;
    }
}

这里有一个小例子 https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

希望有帮助

-编辑-使用动画示例更新了Plunk

-- Edit - Updated Plunk with animated example

可以完成动画按钮的单击，但略有不同，您必须使用放在组件本身内的angular内置动画.它还需要在组件内进行其他导入才能使用它.

Animated button clicks are can be done but they are slightly different, you have to use angular's built-in animation which is put within the component itself. It also requires additional imports within the component to use it.

在组件"设置中，将动画标签与选择器，模板等一起放置，然后可以基于字符串将样式更改应用于样式.

Within the Component set up, you put an animation tag along with you selector, template etc and you can apply the style changes to that based on the string.

   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组件中的内容.

This is then applied to something within the components HTML with a tag like follows.

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

这又是一个更简单的例子 https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

Here's the plunker example again https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

希望能提供更多帮助

这篇关于单击并隐藏并显示离子2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！