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

Question

我有一些布尔变量，可以是 true 或 false，根据该值我必须在 HTML 中显示一些元素，如下所示：

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

问题是我必须隐藏该元素的值为 false，但要显示该元素的值为 true：

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

在 Angular 2 中，仅在 HTML 中，值将始终存在，并且是 true 或 false，正确的方法是什么？

Answer 1

只需反转条件的布尔值即可：

查看实时堆栈闪电战

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

超文本标记语言

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

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

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