Spinner в Angular2 во время введения большой части HTML

Question

В моем приложении Angular есть переключатель, который вызывает введение больших html-данных на страницу. Инжекция занимает около 1-2 секунд, и мне интересно, возможно ли реализовать спиннер, чтобы сообщить пользователю, что представление рендерится.

Я видел несколько реализаций, основанных на машинописном коде, но ни одна из них не подходит для моего случая. Я хотел бы сделать это только на виду - если возможно.

<table (click)="switch.active=!switch.active">
<tr *ngFor="condition"></tr> //here I have about 500 rows
</table>

Answer 1

Вы можете использовать ng-show или ng-hide, чтобы получить эффект желания. Установите условие в значение true в зависимости от того, когда загрузка ваших данных осуществляется через часть js. Я не знаю, как вы извлекаете данные, но вы можете поставить условие, чтобы увидеть, когда это будет сделано, затем обновить условие ng-show, пока загрузка идентификатора данных не покажет счетчик.

Вы также можете попытаться установить загрузчик для каждой строки, чтобы пользователь мог видеть данные, даже если они загружены не полностью.

    <table (click)="switch.active=!switch.active">
    <div class="spinner" ng-show="true condition till data is loading">
    </div>
    <tr *ngFor="condition" ng-show="(negate false) condition when loading complete"></tr>
    </table>