Angular 2+：可見性控制

Question

我喜歡用一個按鈕來控制某些內容的可見性（單擊以顯示內容）。 我能想到的最好的方法是使用布爾變量來控制它。

<button (click)="show=true">ShowIt</button>
<div *ngIf="show == true">{{ content }}</div>

show : boolean = false;
content : string = "blablabla"

我認為那很笨拙。 有沒有更優雅的方式？

編輯

這與如何隱藏某些東西無關。 更多關於我是否真的需要一個額外的變量。

Answer 1

我認為使用*ngIf完全可以。 您可以使用以下方法實現切換：

<button (click)="show = !show">Toggle content</button>
<div *ngIf="show">{{content}}</div>

從文檔 ：

ngIf指令最常見的用法是有條件地顯示內聯模板，如本例所示：

@Component({
  selector: 'ng-if-simple',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show">Text to show</div>
`
})
class NgIfSimple {
  show: boolean = true;
}

看起來像你的東西。