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