Rxjs из 2 разных источников
У меня есть форма с тремя полями, которые помещаются в вызов API в качестве параметров запроса. При нажатии кнопки форма отправляется, вызывается API и данные помещаются в таблицу. Таблица представляет собой таблицу Angular Material, она работает хорошо, но я хочу вызвать API с данными из таблицы с разбивкой на страницы. Поэтому моя первоначальная мысль заключалась в том, чтобы прослушать события из таблицы на предмет изменений событий страницы, но это оказалось сложно, поскольку оно генерируется при загрузке страницы.
Итак, как я начал структурировать, кнопка выдавала на предмет, но похоже, что Angular Pagination для таблицы материалов выдает сразу при загрузке страницы с начальными значениями и с использованием комбайнаLatest в поиске$ Тема также кажется, что она что-то выдает или канал все еще работает и вызывает API
Итак, по сути, происходит то, что API вызывается без данных формы, потому что разбиение на страницы таблицы срабатывает сразу же.
вот очень простой stackBlitz
рад, что у меня есть лучший подход к этому, более реактивный
очень просто попытаться повторить это: https://material.angular.io/comComponents/table/examples#table-http но мне нужно, чтобы API не вызывался до тех пор, пока форма не получит действительные значения (проверено кнопкой отправки)
Некоторое время назад я сделал на сервере мат-таблицу с фильтром, сортировкой и нумерацией страниц в этом ТАК. Я использую оператор merge rxjs вместо joinLastest. Посмотрите, что pageIndex,. pageSize, filter.value и sort вы можете получить их из переменных компонента, поэтому вам не нужно получать результат, наблюдаемый в функции подписки.
Спасибо, для меня они тоже были очень полезны!
Ответы 1
Ваш звонок выполняется благодаря вашему startWith оператору. Вы должны применить его к нумерации страниц, чтобы начать с некоторого значения, например
combineLatest([this.paginator.page.pipe(startWith({pageIndex: 0, pageSize: 5})), this.search$])
Я бы немного отредактировал ваше решение, чтобы сделать его более чистым.
Чтобы обрабатывать нумерацию страниц, лучше слушать вывод (page), тогда вы сможете перехватывать только изменения без начального значения. Начальная нумерация страниц (номер и размер страницы) может быть установлена в ваших свойствах и передана в качестве входных данных для нумерации страниц.
Проверка формы может выполняться изначально с помощью валидаторов элементов управления формой вместо ручных проверок.
Табличный компонент может принимать простой массив элементов, объект источника данных не требуется.
Также у вас есть потенциальные проблемы с длиной. Пагинатор ожидает полной длины вашей коллекции (например, оно может быть 100, если размер страницы равен 5, поэтому пагинатор определяет, что у вас 20 страниц). Таким образом, вашему BE необходимо вернуть общее количество элементов, существующих в базе данных, и элементов для соответствующей запрошенной вами страницы.
вот моя реорганизованная версия ваших табличных фильтров/обработки страниц:
https://stackblitz.com/edit/stackblitz-starters-sksrlk?file=src%2Fmain%2Fmain.comComponent.ts
Если я ничего не упускаю, то думаю, что вы слишком усложнили задачу. Вот ваш стекблиц обновлен