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

Question

我正在尝试使用 async 管道实现 ngIf。但不起作用。有人帮我吗？

这是我的 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>

在上面的 xx {{response | async | json }} 中打印为：

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

但为什么这不适用于 *ngIf 条件？

Answer 1

response 是一个数据源，而 response.responseFail 不是一个。试试这个：

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

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

Answer 2

你必须在异步管道之后访问对象=>

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

ex =>

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

编辑：伊森先到这里。

Answer 3

除了前面的答案，你不应该在同一个可观察对象上多次使用异步管道。

最好这样做：（用 $ 命名 observabkes 是最佳实践）

<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>

并且由于 div 仅在 class 上有所不同，您应该考虑使用 ng-class

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

How to handle `ngIf` with async pipe values?

angular-directive

angular

angular8