Angular 2 preloader

Question

我不知道如何在* ngFor之前放置preloader（簡單圖像）。如果從服務器獲取數據，我的列表將出現，但只要數據未加載，圖片即會顯示。

---

<tr ngFor='#product of products' >       
    <td >       
     {{product.id+ " " + product.title}} 
    </td>    
</tr> 

Answer 1

你必須使用ngIf。這裏是一個模板，你可以使用

<table *ngIf="products.length != 0"> 
    <thead> 
     <tr> 
      <th>Id</th> 
      <th>Title</th> 
     </tr> 
    </thead> 
    <tbody> 

    <tr *ngFor="#product of products"> 
     <td>{{product.id}}</td> 
     <td>{{product.title}}</td> 
    </tr> 

    </tbody> 
</table> 

<loading-image *ngIf="products.length == 0"></loading-image> 

其中loading-image是你的一個組成部分，你自己定義

@Component({ 
    selector: 'loading-image', 
    directives: [], 
    template: ` 
    <img src="{{loadImg}}"> 
    ` 
}) 
export class LoadingImage { 
    loadImg = 'assets/img/your-loading-image.gif'; 
}