我的ng模板标记不等待ngIf-async完成

Question

我正在尝试在我的食谱应用程序中分离所有者和访客，所有者可以编辑自己的食谱，而其他人只能查看它。使用我当前的代码，所有权检查需要一点时间才能完成，同时我还可以运行ng模板。

我不知道该怎么等。

HTML代码：

<!-- If this recipe exists -->
<div *ngIf="recipe$ | async as recipe;">

<!-- If we have a user  -->
<div *ngIf="authService.user$ | async as user; else guest">
<!-- If the user is the owner of this recipe -->
<div *ngIf="user.uid == recipe.recipeOwnerID; else guest"> 
<app-recipe-form [recipe]="recipe" (recipeReceived)="onReceivingRecipe($event)"></app-recipe-form> 
</div>
</div>

<!-- User NOT logged in -->
<ng-template #guest>
<p> You will view it as you are a guest</p>
</ng-template>
</div>

还有一张关于这个问题的gif图。

在ngIf检查完成之前，您可以看到它是如何显示ng模板标记的。

Answer 1

ng模板应该是ngIf语句的模板。

<!-- If this recipe exists -->
<div *ngIf="recipe$ | async as recipe;">
<!-- If we have a user  -->
<div *ngIf="authService.user$ | async as user; else guest">
<!-- If the user is the owner of this recipe -->
<div *ngIf="user.uid == recipe.recipeOwnerID; else guest"> 
<app-recipe-form [recipe]="recipe" (recipeReceived)="onReceivingRecipe($event)"></app-recipe-form> 
</div>
</div>    
</div>
<!-- User NOT logged in -->
<ng-template #guest>
<p> You will view it as you are a guest</p>
</ng-template>