如何使用异步管道值处理“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"

前 =>

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

编辑：伊森先到了这里。

Answer 3

除了前面的答案之外，您不应该多次在同一可观察量上使用异步管道。

最好这样做：(用 $ 命名观察者是最佳实践(

<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仅在类上有所不同，因此您应该考虑使用ng类