为什么 *NgIf 不工作 angular 9 布尔值

Question

我正在尝试像这样在布尔值上显示带有 ngif 的元素：

<li *ngIf="!include == true">
    <span class="badge badge-pill badge-danger">
        <i [ngClass]="hearthClass"></i>
    </span>
</li>

我的 include var il 初始化为 false 并像这样切换状态：

this.localStorageService.getCurrentUser().then((res) => {
      this.userProfile = res;
       if(this.song.likes.includes(this.userProfile._id)){
         this.include = true
       }
      this.classHeart();
    });

谢谢大家！

Answer 1

! 运算符先工作，然后 ==，因此当您将 include 设置为 true 时，ngIf 结果为 false。

随便写

<li *ngIf="include">
    <span class="badge badge-pill badge-danger">
        <i [ngClass]="hearthClass"></i>
    </span>
</li>

Answer 2

不需要在include之前使用!。代码是这样的

  <li *ngIf="include else notInclude">
     <span class="badge badge-pill badge-danger">
       <i [ngClass]="hearthClass"></i>
     </span>
  </li>
  <ng-template #notInclude></ng-template>

ng-template 将用作 else 块

Answer 3

我会让你的 localStorageService return 成为可观察的。所以我会对你的设置采取被动的方法。

import { from, Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';


// define variable in your class as
// userProfile$: Observable<UserProfile>
this.userProfile$ = from(this.localStorageService
  .getCurrentUser())
  .pipe(tap() => this.classHeart()
);

// define variable in your class as
// include$: Observable<boolean>
this.include$: Observable<boolean> = this.userProfile$.pipe(
  map(user: User) => this.song.likes.includes(user._id)
);

<li *ngIf="include$ | async">
    <span class="badge badge-pill badge-danger">
        <i [ngClass]="hearthClass"></i>
    </span>
</li>

当我们在变量名称后缀 $ 时，表示该变量是 Observable，这是 Angular 社区中的标准。

Answer 4

所以我遇到了同样的问题。

首先，我将展示它是如何发生的以及我是如何修复它的。

之前：

export class SomeComponent {
  isUniquePage = true;
}

Html

<div class="col-lg-3" *ngIf="!isUniquePage">
Something
</div>

出于某种原因，这没有按预期工作。该列始终显示。

为了让它发挥作用，我这样做了：

export class SomeComponent {
  isUniquePage : boolean = true;
}

之后该列隐藏了。

这有点奇怪，因为我删除了类型注释并且一切都按预期工作（就像我从一开始就拥有的那样）。

我不知道为什么从一开始就没有按预期工作。

为什么 *NgIf 不工作 angular 9 布尔值

Why *NgIf not working angular 9 with boolean value

angular

angular-ng-if

angular9