На input
'e срабатывает метод и шлет запрос на товары. Получив массив объектов, сразу выводит его в шаблоне и в цикле шлется запрос за ценами на полученные id
.
Проблема - при втором запросе на несуществующий code, сервер возвращает ошибку и некоторые товары в шаблоне выводятся без цен. Как правильно это обработать?
В шаблоне, через *ngIf фильтровать reseivedServices
по наличию ключа price
нельзя.
Можно наверное фильтровать this.reseivedServices = this.reseivedServices.filter( i => i.price)
но правильно, наверное через RxJs
onInputMethod(event) {
this.httpService.getData(url, event)
.subscribe(res => {
// получаем res = [{name: Apple, code: 1},{name: Pear, code: 2},{name: Plum, code: 3}]
// и в шаблоне показываем данные из reseivedServices
this.reseivedServices = res;
// В цикле делаем запрос на цены
for (const item of this.reseivedServices) {
this.httpService.getOtherData(url, item.code)
// при несуществующем коде сервер возвращает ошибку и для некоторых позиций выводятся строки без цен
.subscribe((res => {
if (res.id === item.id) {
item.price = res.price; // добавляем цену
}
}
}
Нужно получить receivedServices
и замапить поток на from
. from
если аргументом получит массив - то будет идти по нему в цикле и генерировать событие для каждого элемента массива:
from([1, 2]).subscribe((number) => {
console.log(`мое число = ${number}`);
});
Где 2 раза увидим в консоли:
мое число = 1
мое число = 2
Также используем оператор mergeMap
, который будет параллельно обрабатывать все события, а не дожидаться выполнения одного после второго:
this.httpService.getData(url, event).pipe(
// засеттили `receivedServices`
tap((reseivedServices) => this.reseivedServices = receivedServices),
// замапили поток
switchMap(() => from(this.receivedServices)),
// параллельно шлем запросы
mergeMap((item) => this.httpService.getOtherData(url, item.code).pipe(
// если сервер возвращает ошибку, то обарачиваем в `try-catch`, чтобы поток не завершился
catchError((error) => of(error))
)),
// фильтруем ответ у которого нет `code`
filter((res) => !!res.code)
).subscribe((res) => {
this.receivedServices = this.receivedServices.map((item) => {
if (res.id === item.id) {
item.price = res.price;
}
return item;
});
});
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть такой код, он работает так, что после окончания обратного отсчёта, он продолжает работать, но крутит уже в плюс, то есть, не останавливаетсяКак...