有选择地返回 forkJoin

Question

我有一个应用程序应该return menu based on given context。

以下是menuA和menuB的来源。

// example of menu derived from given source
  menuA() {
    return [
      {
        a: 'demo1',
        b: 'demo2',
        c: 'demo3'
      },
      {
        e: 'demo4',
        f: 'demo5',
        g: 'demo6'
      }
    ];
  }

  // example of menu fetched from different source eg: db
  async menuB() {
    const ret = [];
    const h = {
      a: 'demo1',
      b: 'demo2',
      c: 'demo3'
    };
    ret.push(h);
    return await ret;
  }

鉴于我对 rxjs 的知识和经验有限，我希望下面的 sn-p 可以接受 string 或 menuA 或 menuB 以返回 observable 的 required menu：

getMenu$(context: string) {
    return forkJoin(
      {
        menuA: of(this.menuA()),
        menuB: from(this.menuB())
      }
    ).pipe(
      mergeMap((m: any) => {
        return m[context];
      })
    )
  }

以上调用警告如下：

Argument of type 'Observable<unknown>' is not assignable to parameter of type 'OperatorFunction<{ menuA: ({ a: string; b: string; c: string; e?: undefined; f?: undefined; g?: undefined; } | { e: string; f: string; g: string; a?: undefined; b?: undefined; c?: undefined; })[]; menuB: { a: string; b: string; c: string; }[]; }, unknown>'.
  Type 'Observable<unknown>' provides no match for the signature '(source: Observable<{ menuA: ({ a: string; b: string; c: string; e?: undefined; f?: undefined; g?: undefined; } | { e: string; f: string; g: string; a?: undefined; b?: undefined; c?: undefined; })[]; menuB: { a: string; b: string; c: string; }[]; }>): Observable<...>'.ts(2345)
The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable<any>'.ts(2684)

根据下面的评论，我还添加了使用地图替换mergeMap时的警告消息：

// modified getMenu$:
getMenu$(context: string) {
    return forkJoin(
      {
        menuA: of(this.menuA()),
        menuB: from(this.menuB())
      }
    ).pipe(
      map(m => m[context])
    )
  }

警告信息：

Argument of type 'Observable<unknown>' is not assignable to parameter of type 'OperatorFunction<{ menuA: ({ a: string; b: string; c: string; e?: undefined; f?: undefined; g?: undefined; } | { e: string; f: string; g: string; a?: undefined; b?: undefined; c?: undefined; })[]; menuB: { a: string; b: string; c: string; }[]; }, unknown>'.
  Type 'Observable<unknown>' provides no match for the signature '(source: Observable<{ menuA: ({ a: string; b: string; c: string; e?: undefined; f?: undefined; g?: undefined; } | { e: string; f: string; g: string; a?: undefined; b?: undefined; c?: undefined; })[]; menuB: { a: string; b: string; c: string; }[]; }>): Observable<...>'.ts(2345)
The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable<unknown>'.ts(2684)

我正在使用angular 12 和rxjs "~6.6.0"。

Answer 1

演示：https://stackblitz.com/edit/typescript-ktm2hz?file=index.ts

function menuA() {
      return [
        {
          a: 'demo1',
          b: 'demo2',
          c: 'demo3'
        },
        {
          e: 'demo4',
          f: 'demo5',
          g: 'demo6'
        }
      ];
    }
    
    // example of menu fetched from different source eg: db
    function menuB() {
      return of([
        {
          a: 'demo1',
          b: 'demo2',
          c: 'demo3'
        }
      ]).pipe(delay(500));
    }
    
    function getMenu$(context: string) {
      return forkJoin(of(menuA()), menuB().pipe(first())).pipe(
        map(([menuA, menuB]) => ({ menuA, menuB })),
        map(m => m[context])
      );
    }
    getMenu$('menuA').subscribe(data => {
      console.log(data);
    });
    getMenu$('menuB').subscribe(data => {
      console.log(data);
    });

更新：

您需要声明您的菜单。 我已经为它创建了枚举

使用 Angular 12 的演示： https://stackblitz.com/edit/angular-12-template-wcgohi?file=src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { forkJoin, Observable, of } from 'rxjs';
import { first, map, delay } from 'rxjs/operators';

enum Menus {
  menuA = 'menuA',
  menuB = 'menuB'
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  menuA(): { [key: string]: any }[] {
    return [
      {
        a: 'demo1',
        b: 'demo2',
        c: 'demo3'
      },
      {
        e: 'demo4',
        f: 'demo5',
        g: 'demo6'
      }
    ];
  }

  // example of menu fetched from different source eg: db
  menuB(): Observable<{ [key: string]: any }[]> {
    return of([
      {
        a: 'demo1',
        b: 'demo2',
        c: 'demo3'
      }
    ]).pipe(delay(500));
  }

  getMenu$(context: Menus): Observable<{ [key: string]: any }[]> {
    return forkJoin([of(this.menuA()), this.menuB().pipe(first())]).pipe(
      map(([menuA, menuB]) => ({ menuA, menuB })),
      map(m => m[context])
    );
  }
  ngOnInit() {
    this.getMenu$(Menus.menuA).subscribe(data => {
      console.log(data);
    });
    this.getMenu$(Menus.menuB).subscribe(data => {
      console.log(data);
    });
  }
}