Блог

Главная - Вопросы по программированию - ng2-интеллектуальная таблица загружает данные при прокрутке

ng2-интеллектуальная таблица загружает данные при прокрутке

#javascript #angular #angular7

#javascript #angular #angular7

Вопрос:

я хочу загрузить данные при прокрутке. применяется прокрутка ng-карты.

 <nb-card>

<nb-card-body class="patientInfoStyle">			    
				   
<ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table>							
				 	
</nb-card-body>

</nb-card>

Заранее спасибо.

Ответ №1:

Вы можете сделать это легко с помощью ngx-бесконечной прокрутки.

Существует также интересное решение, когда дело доходит до отложенной загрузки изображений. Следуйте этому

Комментарии:

1. предоставленная ссылка для решения не работает

2. Спасибо. Я обновил ссылку: medium.com/angular-in-depth /…

Ответ №2:

Это не совсем тот ответ, который вы искали, но вы можете сделать следующее:

  • откройте учетную запись github
  • перейдите в git ng2-smart-table и перейдите в свой репозиторий
  • оформить заказ библиотеки по предоставленной ссылке с помощью git clone
  • добавьте бесконечную прокрутку, используя любую библиотеку по вашему выбору (ngx-infinite scroll, angular material и т.д.)
  • вы можете следовать этому руководству, чтобы упаковать свою библиотеку на github и использовать ее из package json в вашем проекте.

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

  • оберните внешний элемент таблицы с помощью cdk
  • в компоненте tbody замените *ngFor в элементе ‘tr’ на *cdkVirtualFor

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

Ответ №3:

Я последовал совету @olNoy и создал альфа-версию ng2-smart-table с прокруткой тела с использованием прокрутки angular-cdk.

Вы могли бы найти это по адресу https://github.com/andreatoppan/ng2-smart-table это довольно грубо, но я хотел поделиться, если кому-то интересно, как это работает в моем случае.

Я обработал head и body как две разные таблицы, разместив cdk-virtual-scroll-viewport вне tbody. Таким образом, заголовок останется на месте, а тело может прокручиваться. Недостатком этого подхода является то, что столбец head и body будут разными, вот почему я поместил другой заголовок во вторую таблицу и создал несколько неоптимизированных функций для настройки размера столбцов в компоненте. Если вы сочтете это полезным, вы можете расширить или исправить по своему желанию.