ngifにdivを重複するAngular4

Question

サードパーティ製のAPIからデータを取得するためにストリームを購読していますが、その間に回転するホイールでdivを表示します。データを取得すると、そのデータがそのdivに置き換えられます。

<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が画面に表示され、彼らは小さなブリップのような不思議な効果を作ることです：私はngif elseていることがあります。私は彼らが互いに重なり合うようにしたい。コードでそれを達成することはできますか、それともCSSのトリックを調べる必要がありますか？

Answer 1

あなたは開始時にnullとしてmy-data値を宣言し作成しthenを使用するようにngIf構文を変更します。

<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

代わりのdivそれを自己のテンプレートngifとして使用コンテナ

<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>