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

Posted 2023-02-22

【中文标题】如何使用异步管道值处理`ngIf`？

【英文标题】：How to handle `ngIf` with async pipe values?

【发布时间】：2019-11-25 05:45:23

【问题描述】：

我正在尝试使用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 条件？

【问题讨论】：

控制台中是否显示任何错误？

您需要将绑定值绑定到异步，因此在评估该值时它将返回真或假，例如。 response | async as _response 但我会将其添加到响应容器中，然后在您的失败错误中我会像这样检查*ngIf="_response.responseFail 而不是您 asnyc。

@JohnKane 是的，没有错误。

【参考方案1】：

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

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

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

【参考方案2】：

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

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

ex =>

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

编辑：ethan 最先到达这里。

【参考方案3】：

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

最好这样做： （最好用 $ 命名 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 仅在类上有所不同，您应该考虑使用 ng-class