Angular 2 个预加载器

Question

我不知道怎么把preloader(simple image)放在*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';
}

Angular 2 个预加载器

Angular 2 preloader

javascript

preloader

angularjs