我的 ng-template 标签不会等待 ngIf async 完成答案

【问题标题】：My ng-template tag does not wait for ngIf async to finish我的 ng-template 标签不会等待 ngIf async 完成
【发布时间】：2020-10-13 21:53:00
【问题描述】：

我试图在我的食谱应用程序中将所有者和访客分开，所有者可以在其中编辑自己的食谱，而其他人只能查看它。使用我当前的代码，所有权检查需要一些时间才能完成，同时我会运行 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 来解决这个问题。

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

【问题讨论】：

标签： html angular ng-template

【解决方案1】：

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>

【讨论】：