Угловой 2 предзагрузчик

Question

Угловой 2 предзагрузчик

0

Я не знаю, как поставить preloader (простое изображение) до * ngFor. Если данные извлекаются с сервера, отображается мой список, но пока данные не загружены, отображается изображение.

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

Luger 18 май 2016, в 10:56

Источник

Теги:

javascript

angularjs

preloader

1 ответ

Ещё вопросы

Mathieu Gemard · Accepted Answer · 2016-05-18T06-38-00.000Z

Вы должны использовать 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. Что такое <loading-image>, это имя селектора в новом компоненте? Могу ли я поместить, например, тег img <img id = "loading-image" src = "images / ajax-loader.gif" /> где-нибудь прямо в шаблон HTML?
Я отредактировал свой ответ. Да, вы можете вместо этого поставить <img src = "images / ajax-loader.gif" />. Но если вы используете то же загрузочное изображение в другом компоненте, вы можете создать для него компонент.