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

我正在尝试在我的食谱应用程序中分离所有者和来宾，所有者可以编辑自己的食谱，而其他人只能查看。在我当前的代码中，所有权检查需要一点时间才能完成，同时我可以运行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>

关于这个问题

在ngIf检查完成之前，您可以看到它如何显示ng模板标记。
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>


您将以客人的身份查看它