Angular 2 - 单击以显示和隐藏

Question

我想使用按钮来显示和隐藏HTML中的元素。我知道我必须在打字稿中使用布尔值，而在HTML中使用* ngIf。

在我的打字稿我有一个布尔值：

showHide: false; 

在我的HTML我有：

<button (click) = "showHide=true" </button> 

我用这个隐藏元素。我在我想要隐藏的元素上使用* ngIf =“showHide”来隐藏我的元素。

但是，我怎样才能带回我用同一个按钮隐藏的元素？

Answer 1

试试这个

<button (click)="showHide = !showHide">click</button> 

Answer 2

你可以使用一个函数从真更改为false，反之亦然，而不是仅仅设定真实每次显示隐藏单击该按钮。

为此，您需要创建一个功能，例如changeShowStatus更改showHide的值。

changeShowStatus(){ 
    this.showHide = !this.showHide; 
    } 

然后你每次你改变你的显示隐藏= true来changeShowStatus（）按下按钮时调用这个函数：

<button type="button" (click)="changeShowStatus()">show/hide</button> 

设置初始状态，你可以设置在显示隐藏值构造函数，定义显示隐藏正如布尔：

export class App { 
    ... 
    showHide: boolean; 

    constructor() { 
    this.showHide = true; 
    } 
    ... 
} 

Plunker: show/hide div with TS/Angular2