Недавно я имел удовольствие поиграть с таблицей с сотнями тысяч строк данных. Как вы, наверное, догадались, он был не очень производительным.
Проект находится на Angular 2, и, поскольку мне не удалось найти подходящего существующего решения, я подумал, что было бы интересно сделать свое собственное. Мне нужно было выполнить
две вещи.
1. Быть многоразовым.
2. Не загружать данные, пока они не понадобятся.
Чтобы сделать его многоразовым, идея состоит в том, чтобы просто сделать его директивой, чтобы его можно было прикрепить к любому компоненту. Чтобы это работало, компоненту необходимо знать, когда загружаются дополнительные данные. Для этого передайте в директиву исходные данные и ссылку на пустой массив.
Загрузим данные по умолчанию. Используя ngOnChanges, мы можем перезагружать данные по умолчанию каждый раз, когда они меняются.
Чтобы выяснить, когда данные должны быть загружены, вы можете подключиться к событию прокрутки.
Проверяя прокручиваемый элемент, вы можете увидеть, как далеко он прокручивается от верха, и общую высоту прокрутки. Комбинируя их, вы можете инициировать загрузку данных, когда пользователь приближается к концу текущих данных.
Затем вы можете просто добавить данные в массив дисплея. Будьте осторожны, чтобы не изменить ссылку в массиве отображения, иначе компонент не узнает ни о каких изменениях данных.
Теперь у вас есть многоразовый ленивый загрузчик, который можно использовать так:
