Блог

Я работаю над приложением, в котором есть раздел «Избранное». Я извлекаю два источника данных: один из файла const, который я экспортирую как наблюдатель(observerA$), и один из базы данных, которая содержит только идентификаторы, которые были выбраны(observerB$), и оба работают по назначению. Я хотел бы использовать сохраненные идентификаторы из observerB$, чтобы пометить логическое значение в observerA$

ObserverA$ содержит всю информацию, которую я использую для заполнения пользовательского интерфейса. Интерфейс для observerA

 {
    title: string,
    id: number,
    page: string,
    subcategory: string,
    favorite?: boolean
}
 

observerB$ содержит идентификаторы для избранных элементов
Интерфейс для наблюдателя$

 {
   (some unrelated fields)
   id: number
}
 

Я заставляю его работать, изменяя массив внутри моего компонента, но так как он используется в нескольких компонентах, я бы подписался на observerA$, используя asyncpipe, чтобы получать обновления без необходимости использовать массив машинописи

Это звучит так, как будто вы пытаетесь составить наблюдаемое из двух наблюдаемых источников. Давайте назовем ваши два источника наблюдаемыми item$ и favoriteIds$ для простоты.

Вы можете определить свою составленную наблюдаемую (назовите ее itemWithFavoriteProperty$ просто для краткости) следующим образом:

 const itemWithFavoriteProperty$ = item$.pipe(
  switchMap(item => favoriteIds$.pipe(
    map(favoriteIds => favoriteIds.some(id => id === item.id)),
    map(favorite => ({...item, favorite}))
  ))
);
 

Если вы не знакомы с switchMap ним , он в основном подписывается на наблюдаемый источник и испускает свои выбросы. Таким образом, всякий item$ раз, когда эмиссирует, switchMap будет подписываться favoriteIds$ и выдавать массив идентификаторов (в любое время, когда он меняется), который мы затем сопоставляем:

• сначала к логическому значению, указывающему, находится ли элемент в избранном массиве
• затем к копии, выданной item с приложением favorite свойства.

Так itemWithFavoriteProperty$ будет излучать в любое время item$ или когда favoriteIds$ будет излучать. Однако на самом деле мы не хотим выдавать, если favorite логическое значение не изменилось, поэтому мы можем использовать distinctUntilChanged :

 const itemWithFavoriteProperty$ = item$.pipe(
  switchMap(item => favoriteIds$.pipe(
    map(favoriteIds => favoriteIds.some(id => id === item.id)),
    distinctUntilChanged(),
    map(favorite => ({...item, favorite}))
  ))
);
 

Вот стекблитц, с которым вы можете поиграть.