用于ngif overlap Angular4的重叠div

Question

我订阅了一个流，以便从第三方API中获取一些数据，当这种情况发生时，我会显示一个带有旋转轮的div。一旦我得到了数据，那么这个数据就会取代这个div。我有一个ngif else

<div *ngIf="my-data;else loading" class="my-data-container">
  ...
</div>
<ng-template #loading>
   <div class="loading-container">
      shows the loading spinning wheel    
   </div>
</ng-template>

我遇到的问题是，在很短的一段时间内，两个div都出现在屏幕上，它们会产生一个奇怪的效果，就像一个小光点。我希望它们互相重叠，否则它们就会出现在另一个下面。我能通过代码实现这一点吗?或者我需要研究css技巧吗？

Answer 1

确保在开始时将my-data值声明为null，并更改ngIf语法以使用then

<div *ngIf="my-data; then #content; else loading" class="my-data-container">
</div>
<ng-template #content>
    show this content after loading
</ng-template
<ng-template #loading>
   <div class="loading-container">
      shows the loading spinning wheel    
   </div>
</ng-template>

Answer 2

使用容器作为ngif模板而不是div it self

<ng-container *ngIf="my-data;else loading">
  <div class="my-data-container">
  ...
  </div>
</ng-container>
<ng-template #loading>
   <div class="loading-container">
      shows the loading spinning wheel    
   </div>
</ng-template>