Блог

У меня есть 2 Obsevables kasboeklijst$ , RubriekLijst$ которые я хочу объединить KasboekMenu$ .

 kasboekLijst$: Observable<Kasboek[]>;

export interface Kasboek {
  id: string;
  kasboek_id: number;
  jaartal: number;
  omschrijving: string;
  datum: Timestamp;
  rubriek_id?: number;
  rubriek?: Rubriek;
  inkomsten: number;
  uitgaven: number;
}
rubriekLijst$: Observable<Rubriek[]>;

export interface Rubriek {
  id?: string;
  rubriek_id: number;
  rubriek: string;
  kasboek?: Kasboek[];
}

kasboekMenu$: Observable<KasboekMenu[]>;

export interface KasboekMenu {
  jaartal: number;
  rubriek?: RubriekMenu[];
}

export interface RubriekMenu {
  id?: number;
  rubriek?: string;
}

  

Результат, который я ожидаю:

  2017

    Vergaderingen
    Algemeen
    Opendeurdag
    Clubsouper
    Lidgeld
    ADSL
    Spaghetti avond 

2018

    Vergaderingen
    Algemeen
    Opendeurdag
    Clubsouper
    Lidgeld
    Nieuwjaar
    ADSL
    Spaghetti avond 

2019

    Vergaderingen
    Algemeen
    Clubsouper
    Lidgeld
    Nieuwjaar
    ADSL 

2020

    Vergaderingen
    Algemeen
    Lidgeld
    Nieuwjaar 
  

Я извлекаю данные в obsevables из базы данных Firestore с помощью этого кода:

 this.rubriekLijst$ = this.angularFirestore
      .collection<Rubriek>('rubriek', rubriekQuery)
      .valueChanges();

this.kasboekLijst$ = this.angularFirestore
      .collection<Kasboek>('kasboek', kasboekQuery)
      .valueChanges();
  

Мой код работает нормально, мой вопрос в том, могу ли я упростить свой код и правильно ли это.

Это код, который я использую для сортировки и объединения obsevables:

 let rubriekMenu: RubriekMenu;
    const kasboekMenu: KasboekMenu[] = [];
    this.kasboekMenu$ = zip(this.kasboekLijst$, this.rubriekLijst$).pipe(
      concatMap(([kasboeken, rubrieken]) => {
        rubriekLijst = rubrieken;
        return kasboeken;
      }),
      groupBy((groep: Kasboek) => groep.jaartal),
      mergeMap((groupedObservableData: GroupedObservable<number, Kasboek>) => {
        kasboekMenu.push({
          jaartal: groupedObservableData.key,
          rubriek: [],
        });
        kasboekMenu.sort((a: KasboekMenu, b: KasboekMenu) =>
          a.jaartal > b.jaartal ? 1 : b.jaartal > a.jaartal ? -1 : 0
        );
        return groupedObservableData.pipe(
          distinct((rubriekId) => rubriekId.rubriek_id),
          map((kasboek: Kasboek) => {
            const findRubriek = rubriekLijst.find(
              (rubriek) => rubriek.rubriek_id === kasboek.rubriek_id
            );
            rubriekMenu = {
              id: kasboek.rubriek_id,
              rubriek: findRubriek.rubriek,
            };
            const findKasboekMenu: KasboekMenu = kasboekMenu.find(
              (findMenu) => findMenu.jaartal === kasboek.jaartal
            );
            findKasboekMenu.rubriek.push(rubriekMenu);
            findKasboekMenu.rubriek.sort((a: RubriekMenu, b: RubriekMenu) =>
              a.id > b.id ? 1 : b.id > a.id ? -1 : 0
            );
            return kasboekMenu;
          })
        );
      })
    );

  

Я бы сказал, что ваш код сейчас хорош, и, насколько я вижу, нет никакой конкретной вещи, которая могла бы его улучшить. Поскольку это работает отлично — как вы упомянули — ваши вызовы Firestore также верны, и это будет больше о способе сортировки и объединения ваших наблюдаемых. Тем не менее, они, похоже, тоже хорошо структурированы.

Если у вас все еще есть некоторые сомнения по этому поводу или вы хотите больше примеров объединения наблюдаемых, вы можете проверить страницы ниже для получения дополнительной информации.

• Превратите несколько наблюдаемых объектов в один наблюдаемый объект.
• Объедините коллекции Firestore в один наблюдаемый массив