rgripper rgripper - 2 months ago 24
TypeScript Question

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



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


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

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


Angular2 release version

Answer

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">
    {{product.name}}
</div>