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

Question

我有一些 bool 变量，可以是 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

只需反转条件的 bool 值即可:

See live stackblitz

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 是一个 bool 值。方式*ngIf工作原理是，当表达式为 true 时，将元素插入到 DOM 中，当表达式为 false 时，将元素从 DOM 中删除。