ал с точного примера «Таблица данных с сортировкой, разбиением на страницы и фильтрацией». Вотhttps://material.angular.io/components/table/examples Работает нормально. Но теперь я хотел бы использовать paginator без таблицы, поэтому я заменил в html-файле "<mat-table ... </ mat-table>" просто на:

<div *ngFor="let row of dataSource.connect() | async" >
{{ row.id }} {{ row.name }} {{ row.progress }} {{ row.color }} <br>
</div>

Но это не работает нормально, так как кажется, что:

connect () запускается много раз при запускетолько стреляющий стрелок заставляет это бежать много раз сноваввод одной буквы в фильтр сделать то же самое

Я думаю, что это не правильный путь.

В конце я хотел бы повторно использовать тот же метод для отображения карт, с фильтрацией и разбиением на страницы.

ТИА за любую помощь.

JP

Я положил код здесь:https://angular-6q44a4.stackblitz.io Я добавил console.log, чтобы показать, что происходит (не на stackblitz), но вот пример:

Просто наведите курсор на стрелку и нажмите, многие визуализированные данные видны.

Принимая во внимание тот же код, но с таблицей, он работает как ожидалось:

Я воссоздал с нуля один пагинатор с мини-потрясающими кнопками, вдохновленный некоторым кодом изhttp://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google , добавил несколько фильтров и все отлично работает :)