Angular 应用程序 - 来自 firestore 数据库的两个可观察对象的 GroupBy答案

【问题标题】：Angular app - GroupBy for two observables from firestore databaseAngular 应用程序 - 来自 firestore 数据库的两个可观察对象的 GroupBy
【发布时间】：2021-02-13 15:23:14
【问题描述】：

我有 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

我使用以下代码从 Firestore 数据库中提取可观察数据中的数据：

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

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

我的代码工作正常，我的问题是我是否可以简化我的代码，这是正确的方法。

这是我用来排序和组合观测值的代码：

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;
          })
        );
      })
    );

【问题讨论】：

标签： angular google-cloud-firestore rxjs

【解决方案1】：

我会说你的代码现在很好，据我所知，没有任何具体的东西可以改进它。因为它工作得很好——正如你提到的——你对 Firestore 的调用也是正确的，它更多的是关于排序和组合你的 Observables 的方式。但是，它们似乎也结构良好。

如果您对此仍有疑问或想要更多组合 Observables 的示例，您可以查看以下页面以获取更多信息。

【讨论】：