带有 BehaviorSubject 的 ngIf 更改元素的顺序答案

【问题标题】：ngIf with a BehaviorSubject changes the order of elements带有 BehaviorSubject 的 ngIf 更改元素的顺序
【发布时间】：2021-11-05 06:17:45
【问题描述】：

我的服务中有两个像这样的 BehaviorSubject 值，

public showExportCsvModal = new BehaviorSubject<boolean>(false);
public showDownloadModal = new BehaviorSubject<boolean>(false);

而我的html代码是这样的，

    <p *ngIf="stateService.showExportCsvModal | async">
        {{'exportModal.severalMinutesToComplete' | translate }}
    </p>
    
    <p *ngIf="stateService.showDownloadModal | async">
        {{ 'exportModal.severalMinutesToCompleteDownload' | translate }}
    </p>

    <p>
        {{'exportModal.downloadTheFinishedFileFrom' | translate }}
    </p>

问题是第三个 p 标签显示在顶部是这样的，

如何评估 ngIf 语句，以便第一个 p 标记先显示，然后是公共标记？任何帮助将不胜感激。

【问题讨论】：

你能在 stackblitz 中重现这个问题吗？这是我的模拟版本，按预期工作：stackblitz.com/edit/angular-ivy-53w12n?file=src/app/…
@KurtHamilton 问题是我正在使用另一个服务中的 BehaviorObject，如果我从组件中使用它，它会按预期运行。

标签： angular typescript angular-ng-if behaviorsubject

【解决方案1】：

将{{'exportModal.downloadTheFinishedFileFrom' | translate }} 添加到每个<p *ngIf>

<p *ngIf="stateService.showExportCsvModal | async">
    {{'exportModal.severalMinutesToComplete' | translate }}
    {{'exportModal.downloadTheFinishedFileFrom' | translate }}
</p>

<p *ngIf="stateService.showDownloadModal | async">
    {{ 'exportModal.severalMinutesToCompleteDownload' | translate }}
    {{'exportModal.downloadTheFinishedFileFrom' | translate }}
</p>

【讨论】：

这解决了问题。谢谢你的帮助。