如何使用異步管道值處理`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 {{response | async | json }} 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

編輯：ethan先來到這里。

Answer 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