根据值 Angular 2 隐藏和显示元素

【问题标题】：Hide and show element based on value Angular 2根据值 Angular 2 隐藏和显示元素
【发布时间】：2018-08-04 09:43:09
【问题描述】：

我有一些布尔变量，可以是真或假，基于该值，我必须在 HTML 中显示一些元素，如下所示：

<p *ngif=isOwner>Test</p>

问题是我必须隐藏元素的值为假，但要显示元素的值为真：

this.storage.get('User').then((val) => {
    this.isOwner = val.Owner.IsOwner;
});

在 Angular 2 中正确的方法是什么，就在 HTML 中，值将永远存在，并且是真还是假？

【问题讨论】：

【解决方案1】：

只需反转条件的布尔值：

export class AppComponent  {
  public isOwner: boolean = true;
  toggleIsOwner() {
    this.isOwner = !this.isOwner; 
  }
}

HTML

<button (click)="toggleIsOwner()">show/hide</button>

<p *ngIf="isOwner">Hello World!</p>

showMe 是一个布尔值。 *ngIf 的工作方式是，当表达式为 true 时，将元素插入到 DOM 中，当表达式为 false 时，将元素从 DOM 中移除。

【讨论】：