如何使用异步管道值处理`ngIf`？

Question

I am trying to implement the ngIf with using async pipe. but not works. any one help me here?

here is my html:

<div class="response-container">
    xx {{response | async | json }}
    <div class="failed-error" *ngIf="(response.responseFail | async )">
        {{response.message}}
    </div>
    <div class="success-msg" *ngIf="(response.responseSucc | async) === 'true' ">
        {{response.message}}
    </div>
</div>

in the above xx {{response | async | json }} xx {{response | async | json }} xx {{response | async | json }} it prints as:

xx { "responseFail": false, "responseSucc": true, "message": "success" }

But why this is not works with *ngIf condition?

Answer 1

The response is a data source while response.responseFail is not one. Try this:

*ngIf="(response | async )?.responseFail"

*ngIf="(response | async)?.responseSucc  === 'true' "

Answer 2

you have to access the object after the async pipe =>

*ngIf="(response | async )?.responseFail"

ex =>

https://stackblitz.com/edit/angular-tvmqzm

edit : ethan got here first.

Answer 3

Besides the previous answers, you shouldn't use the async pipe on the same observable several times.

Better do this: (naming observabkes with $ is best practice)

<div *ngIf="response$ | async as response" class="response-container">
    xx {{response | json }}
    <div class="failed-error" *ngIf="response.responseFail">
        {{response.message}}
    </div>
    <div class="success-msg" *ngIf="response.responseSucc">
        {{response.message}}
    </div>
</div>

And since those div's only differ in class you should consider using ng-class