Виртуальный свиток для Angular 2

Question

Всем привет!

Мне нужно создать таблицу с таким количеством записей, используя угловой js 2. Для этого я пробую виртуальную прокрутку. Тем не менее, я не могу найти документацию или образцы в рабочем состоянии.

Пожалуйста, помогите мне начать работу с угловым 2 виртуальным свитком.

Answer 1

Вы можете попробовать ngx-ui-scroll. Это обеспечивает *uiScroll структурная директива, которая может быть непосредственно использована в шаблоне вашего компонента приложения. В настоящее время (v0.0.4) не поддерживает макет таблицы, но если вы можете использовать div-макет, он может выглядеть так

<div class="viewport">
  <div *uiScroll="let item of datasource" class="row">
    <div class="col1">{{item.data1}}</div>
    <div class="col2">{{item.data2}}</div>
    <div class="col3">{{item.data3}}</div>
  </div>
</div>

Тогда вам нужно реализовать Datasource Объект в соответствии с документацией или примерами кода с демонстрационной страницы.

Answer 2

Я настоятельно рекомендую https://github.com/rintoj/ngx-virtual-scroller

Он очень надежен, без проблем обрабатывает десятки тысяч сложных элементов. Я использую его в своем приложении Video Hub с открытым исходным кодом, чтобы показать галерею изображений и видео (настраиваемые элементы), позволяющую пользователю изменять количество столбцов. Смотрите код на GitHub.

Answer 3

Вы должны взглянуть на Angular Material VirtualRepeat https://material.angularjs.org/latest/demo/virtualRepeat

Директива md-virtual-repeat предоставляет атрибут md-on-demand, который позволяет избежать использования массива в качестве поставщика источника данных.

[Edit] Angular Material VirtualRepeat пока недоступен для angular2, я сделал несколько изменений в rintoj/angular2-virtual-scroll, чтобы получить данные из бэкэнда, а не из массива. это на github здесь https://github.com/pnocera/ng2-vscroll