在 ionic 2 中单击时隐藏和显示答案

【问题标题】：Hide and show on click in the ionic 2在 ionic 2 中单击时隐藏和显示
【发布时间】：2017-07-12 12:58:27
【问题描述】：

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

我的代码如下：

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

需要隐藏

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

提前致谢

【问题讨论】：

标签： angular typescript ionic2

【解决方案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;
    }
}

这是一个笨拙的例子https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

希望有帮助

-- 编辑 - 用动画示例更新了 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 的例子https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

希望对您有所帮助

【讨论】：

还有动画？谢谢:)
@jjgarcía 希望动画示例对您有所帮助:)
完美！
别忘了在你的 app.module.ts 中包含 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

【解决方案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;
}

【讨论】：