Блог

Моей задачей было получить наблюдаемый список на основе двух других списков. Вот код, который работает, но мне интересно, все ли в порядке (также с точки зрения производительности):

 get availableCodeValueLanguages$(): Observable<Common.Lookup<string>[]> {
    return this.languageCodesLookupData$.pipe(
      withLatestFrom(this.languageData$),
      map(([lookupLanguages, codeValues]) => {
        const codeValueLanguageCodes = codeValues.map(codeValue => codeValue.language.id);
        return lookupLanguages.filter(lookupLanguage =>
          !codeValueLanguageCodes.includes(lookupLanguage.id));
      }),
      catchError(error => {
        return of([]);
      })
    )
  }
  

languageData $ содержит данные для сетки. Это список сложных свойств CodeValue, каждое из которых включает в себя отдельный язык. languageCodesLookupData$ — это полный список всех доступных языков. availableCodeValueLanguages $ должен включать языки для выпадающего списка, должна быть возможность добавлять только один язык для каждого значения кода в форме.

languageCodesLookupData $ загружается при инициализации компонента (маловероятно, что это изменится во время работы со страницей). Соответственно, languageData $ изменяется, как только мы добавляем новую запись в список CodeValue в форме.

Ваш код выглядит нормально с точки зрения производительности, использование withLatestFrom является типичным способом объединения потоков.

Однако…

languageCodesLookupData $ загружается при инициализации компонента (маловероятно, что это изменится во время работы со страницей)

Использование withLatestFrom будет выдавать только тогда, когда исходная наблюдаемая выдает.

languageData $ изменяется, как только мы добавляем новую запись в список CodeValue в форме.

Итак, я предполагаю, что вы хотели бы availableCodeValueLanguages$ , когда это произойдет. Если это так, вам следует использовать combineLatest :

 availableCodeValueLanguages$ = combineLatest(
  this.languageCodesLookupData$,
  this.languageData$
).pipe(
  map(([lookupLanguages, codeValues]) => {
    const codeValueLanguageCodes = codeValues.map(codeValue => codeValue.language.id);
    return lookupLanguages.filter(lookupLanguage =>
      !codeValueLanguageCodes.includes(lookupLanguage.id));
  }),
  catchError(error => {
    return of([]);
  })
);
  

Вы могли бы определить codeValueLanguageCodes как свою собственную наблюдаемую, если хотите.

 codeIds$ = this.languageData$.pipe(
    map(codeValue => codeValue.language.id)
);

availableCodeValueLanguages$ = combineLatest(
  this.languageCodesLookupData$,
  this.codeIds$
).pipe(
  map(([languages, codeIds]) => languages.filter(
    language => !codeIds.includes(language.id));
  ),
  catchError(error => {
    return of([]);
  })
);