基于结果模型的具有异步管道内部条件的 Angular *ngIf

Question

I'd be a happy man if someone could explain why the following is not working as expected please? The hasCreative is a boolean but regardless of its true/false value, the <li> is always displayed. Any suggestions would be great. Thank you.

<ng-container *ngIf="uiModel$ | async as model">
    <ul class="nav" style="padding-bottom: 30px;">
      <li *ngIf="model.hasCreative" class="nav-item">
        <a class="nav-link active" routerLinkActive="active" [routerLink]="['']">Home</a>
     </li>
   </ul>
</ng-container>

export class UserInterfaceModel {
  hasCreative: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class UserInterfaceService {
  user: CognitoUser;
  userLoggedIn = false;
  private userInterfaceModelSubject$: Subject<UserInterfaceModel> = new Subject();
  userInterfaceModel$ = this.userInterfaceModelSubject$.asObservable();

  constructor(private authService: AuthService) {
    combineLatest([this.authService.onUserLoaded$]).subscribe(([currentUser]) => {
      this.user = currentUser;
      this.userLoggedIn = true;
      this.buildUserInterfaceModel();
    });
  }

  buildUserInterfaceModel(){
    const model = new UserInterfaceModel();
    if (this.userLoggedIn && this.user !== null){
      model.hasCreative  = this.user.getSignInUserSession().getIdToken().payload.creative;
    }
    this.userInterfaceModelSubject$.next(model);
  }
}

Answer 1

Try using this:

<ng-container *ngIf="uiModel$ | async as model; else loading">
    <ul class="nav" style="padding-bottom: 30px;">
      <li *ngIf="model.hasCreative === true " class="nav-item">
        <a class="nav-link active" routerLinkActive="active" [routerLink]="['']">Home</a>
     </li>
   </ul>
</ng-container>

<ng-template #loading>
  Loading stuff...
</ng-template>

If loading template will render it means your Observable has no value. If it dosnt work too, try render the value of model.hasCreative by adding somethin like this:

<span>{{model.hasCreative}}<span>

out of <ul> tag to see if model.hasCreative has true/false value or not.