Почему * NgIf не работает angular 9 с логическим значением

Question

Я пытаюсь отобразить элемент с ngif на логическом значении следующим образом:

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

мой включаемый переменный инициализирован в 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

Я бы сделал ваш localStorageService возвращаемым наблюдаемым. Поэтому я бы использовал реактивный подход к вашей настройке.

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 3

Нет необходимости использовать ! до 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 block