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

使用容器作为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>

Answer 2

确保您在开始时将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>

重叠div为ngif else Angular4

2 个答案: