我的ng-template标记不等待ngIf异步完成

如何解决我的ng-template标记不等待ngIf异步完成

我正在尝试在我的食谱应用中分离所有者和来宾，所有者可以在其中编辑自己的食谱，而其他人只能查看它。使用我当前的代码，完成所有权检查需要一些时间，同时使ng-template运行。

我不知道如何等待它。

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。

您可以看到它如何显示ng-template标记，直到ngIf检查结束。

解决方法

ng-template应该是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>