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

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

希望有所帮助

- 修改 - 使用动画示例更新了Plunk

动画按钮点击可以完成，但它们略有不同，你必须使用角度的内置动画，它放在组件本身内。它还需要组件内的其他导入才能使用它。

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

   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>

这里再次提到了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;
}

在离子2中单击时隐藏和显示

2 个答案: