Why the condition of my *ngIf is ignored with Observable

Question

Here is my main component.

<div *ngIf="user$ | async">
  <h1>test</h1>
</div>

@Component({
  selector: 'app-core',
  templateUrl: './core.component.html',
  styleUrls: ['./core.component.scss']
})
export class CoreComponent {
  @Select(UserState) public user$!: Observable<User>;
  constructor() {}
}

And I wrote UserState, with ngxs.

@State<UserStateModel>({
  name: 'user',
})
@Injectable()
export class UserState {
  constructor(
    private api: ApiService,
    private tokens: TokenService) { }

  @Action(GetUser)
  public get(ctx: StateContext<UserStateModel>) {
    const id = this.tokens.getAccessTokenPayload()!.sub;
    return this.api.get<User>(Endpoint.USERS, id).pipe(
      tap((user: User) => {
        ctx.setState(user);
      })
    );
  }
}

Why the condition of my *ngIf is ignored and the router-outlet is rendered when I haven't even initialized the value of my user state.

With ReduxDevtool

Update after Michaël answer

<div *ngIf="user">
  <h1>test</h1>
</div>

@Component({
  selector: 'app-core',
  templateUrl: './core.component.html',
  styleUrls: ['./core.component.scss']
})
export class CoreComponent implements OnInit {
  public user?: User;
  constructor() {}
  public ngOnInit(){
    this.store.select(UserState).subscribe((user) => {
      this.user = user;
    });
  }
}

For testing purposes, I tried this, and the user state is still initialized. I don't understand why.

Can you please refer below answer. https://stackoverflow.com/questions/49631742/ngif-not-working-as-expected-with-observable — Dako patel, Sep 06 '22 at 13:20
@Dakopatel They talk about adding parentheses to encapsulate asynchrony, but my problem seems to come from something else. (I've updated my answer) — Julien LeGa, Sep 06 '22 at 13:23
It does not work. If I push a user into my user state, it's never rendering — Julien LeGa, Sep 06 '22 at 13:40
Your data (empty object) is actually true’ish. That is why it is rendering. — MikeOne, Sep 06 '22 at 14:16
@MikeOne Is there any way that there is no default value? Rather than being forced to subscribe to the Observable — Julien LeGa, Sep 06 '22 at 14:31
In your original solution, just take a property inside your user to check for, something like *ngIf= “(user$ | async)?.name” (if name exists there) — MikeOne, Sep 06 '22 at 20:28

score 0 · Answer 1 · answered Sep 06 '22 at 15:40

0

According to NGXS documentation :

By adding the definite assignment assertion we're telling the type-checker that we're sure that pandas$ property will be initialized (by the @Select decorator).

So the fact you are using both @Select AND Definite Assignment Assertion causes your user$ to be initialized.

answered Sep 06 '22 at 15:40

Michaël Deloris

56
3

I tried some change (I update my question above), and the user state is still initialized. I don't understand why. – Julien LeGa Sep 06 '22 at 16:43

Why the condition of my *ngIf is ignored with Observable

Update after Michaël answer

1 Answers1