2016-05-18 7 views
0

* ngForの前にプリローダー(単純なイメージ)を置く方法がわかりません。データがサーバから取得された場合、私のリストは表示されますが、データがロードされない限り、画像が表示されます。あなたはngIfを使用する必要が角2プリローダー


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

答えて

0

。ここでは、loading-imageあなたは私が角に新しいです申し訳ありませんが、自分で

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

を定義するコンポーネントです

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

を使用することができますテンプレートです。 とは、これは新しいコンポーネントのセレクタの名前ですか?たとえば、imgタグをどこかで直接HTMLテンプレートに入れることはできますか? – Luger

+0

私は私の答えを編集しました。 はい、代わりにを入力してください。しかし、同じローディングイメージを別のコンポーネントで使用している場合は、コンポーネントのコンポーネントを作成することもできます。 –