对于 Angular ngIf 异步/可观察 state 更改错误，今天没有好的答案

Question

Googling around it seems just about anyone who's ever dabbled in Angular has had this issue before:

you make a Dom element with an *ngIf directive:

<div *ngIf="array.length">
Don't show me until I'm ready please !
</div>

You have an eval on the spot for whether the child dom should exist.

then, for example, you receive your data as an api response:

 this.http.post(
      this.url,
      args,
      this.authenticationService.getRequestOptions()
    ).subscribe(data => {
        this.array = data;
        console.log('truthy? : ', this.array.length);
    }
 );

for some reason the Angular change detect fails at this point and the *ngIf Dom node does not eval and become visible.

even though your console gave you:

truthy? : 1

What is going on here and what is the best approach?

Answer 1

The issue is changeDetect is for all intents and purposes OFF during an ngOnInit lifecycle. (and you should consider it OFF for things that come before as well such as the constructor)

Only at the ngAfterViewInit lifecycle does the changeDetect start back up.

By calling my API within ngAfterViewInit I have a correct result.

Answer 2

Just to mention another possible solution.

Its also tipical to do:

someObservable$ = this.http.post(
          this.url,
          args,
          this.authenticationService.getRequestOptions()
);

// or if getRequestOptions() somehow returns an observable:

someObservable$ = this.authenticationService.getRequestOptions().pipe(
    mergeMap((options) => {
        return this.http.post(this.url, args, options);
    })
);

<div *ngIf="(someObservable$ | async)?.length">
    Don't show me until I'm ready please !
</div>

Beware that several things might be missing from this example snippet, like avoiding multiple (Post) requests being done .