rgripper rgripper - 1 year ago 128
TypeScript Question

Why does AsyncPipe evaluate differently in {{}} and *ngIf

<div *ngIf="!!(result$ | async)">
{{!!(result$ | async)}}

I expect it to be blank and then show
. Surprisingly, it shows
and then
. Is there a different evaluation mechanism for
? The
is of type
Observable<{ products: any[] }>

constructor() {
this.result$ = Observable.of("Dummy!").delay(3000);

Angular2 release version

Answer Source

As I said in my comment, If I had to guess I would say that after each check, structural directives are evaluated before interpolations . But I'm not sure about the inner workings of that so don't take my word for it.

As I imagine you only want a reliable way on rendering your results as soon they are available, I believe something like this might work for you:

<div *ngFor="let product of result$ | async">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download