Angular 2 预加载器

Question

我不知道如何将预加载器（简单图像）放在 *ngFor 之前。如果数据是从服务器获取的，则会显示我的列表，但只要未加载数据就会显示图片。

---

<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';
}