我映射的可观察结果是...可观察? (通过switchMap运行之后)

时间:2020-09-29 22:51:01

标签: angular rxjs switchmap

我期望映射的可观察对象的结果是我从先前的链式可观察对象中选择的实体,但相反,它似乎是可观察对象本身。但是,我不能订阅或映射它,因为它说它是(自定义)名册类型。

也许我用错误的方式构造了我的开关图?我正在尝试在秋田商店中查询一个实体,如果请求的实体不存在,则用API调用填充它。

基本流程是:从商店或API获取花名册>通过向其中添加一些元素将花名册处理为注册表>通过模板将其提取。

略作编辑的查询服务:

Invoke()

控制台记录的结果:

import { Injectable } from '@angular/core';
import { QueryEntity } from "@datorama/akita";
import { Observable } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';

import { Manifest } from 'src/app/models/manifest.model';
import { Roster, Registry } from 'src/app/models/roster.model'
import { Asset } from 'src/app/models/objects.model'

import { RosterState, RosterStore } from './roster.store';
import { RosterService } from 'src/app/state/roster.service';

@Injectable({providedIn: 'root'})
export class RosterQuery extends QueryEntity<RosterState> {
  constructor(private rosterStore: RosterStore,
              private rosterService: RosterService){
    super(rosterStore)
  }

  selectRoster(slug:string){
    debugger;
    const roster$ = this.selectEntity((e:Roster) => e.slug === slug).pipe(
      switchMap(res => {
        console.log('Response log:',res)
        if(!res){
          return this.rosterService.loadRoster(slug).pipe(map(res => {
            this.selectEntity((e:Roster) => e.slug === slug).subscribe(res => console.log('Entity log:',res))
            return this.selectEntity((e:Roster) => e.slug === slug) as Observable<Roster>;
          }));
        }else{
          return this.selectEntity((e:Roster) => e.slug === slug) as Observable<Roster>;
        }
      })
    );
    return roster$ as Observable<Roster>;
  }

  composeRegistry(slug:string):Observable<Registry>{
    return this.selectRoster(slug).pipe(map(roster => {
      console.log('Roster log:',roster)
      let manifest: Manifest = (manifestData  as  any).default;
      let registry: Registry = {
        ...roster,
        hash: manifest.hash,
        game: manifest.game,
      console.log('Registry log:',registry);
      registry.assets = [this.assetIterate(manifest,roster.assets[0])];
      return registry;
    }));
  }

如您所见,当我记录对EntityState的订阅时,它提供了一个普通对象,但是当我记录映射结果时,它说它是可观察的。但是,当我订阅或映射它时,它向我抱怨,告诉我这是一个名册,而不是可观察的:

roster.query.ts:33 Entity log: {id: "756d65egh9h76e567g87ut567g7", slug: "Testing", manifest: "4e5y85"}
roster.query.ts:46 Roster log:  Observable {_isScalar: false, source: Observable, operator: DistinctUntilChangedOperator}
roster.query.ts:54 Registry log: {_isScalar: false, source: Observable, operator: DistinctUntilChangedOperator, hash: "6s43qhuy53as980u08647ugp864q867-08d4svbn9uh54xc8vu", game: "TBD", …}

2 个答案:

答案 0 :(得分:0)

最后通过链接一个mergeAll()解决了它(但是我还是走了一个不同的方向)

答案 1 :(得分:0)

我知道您不再需要答案,但是我将尝试解释为什么mergeAll()为您工作,以防将来对其他人有所帮助。

const smallNumbers$ = from([1,2,3]);
const earlyAlpha = from(['a','b','c']);

// Stream 1
// This prints: 1a 1b 1c 2a 2b 2c 3a 3b 3c
// We've logged the values from all three streams
smallNumbers$.pipe(
  switchMap(smallNumber => 
    earlyAlpha$.pipe(
      map(earlyAlpha => smallNumber + earlyAlpha)
    )
  )
).subscribe(console.log);

// Stream 2
// This prints: 1a 1b 1c 2a 2b 2c 3a 3b 3c as well
smallNumbers$.pipe(
  switchMap(smallNumber => 
    earlyAlpha$.pipe(
      map(earlyAlpha => of(smallNumber + earlyAlpha))
    )
  ),
  mergeAll()
).subscribe(console.log);

// Stream 3
// This prints: 1a 1b 1c 2a 2b 2c 3a 3b 3c as well
smallNumbers$.pipe(
  switchMap(smallNumber => 
    earlyAlpha$.pipe(
      map(earlyAlpha => of(smallNumber + earlyAlpha)),
      mergeAll() 
    )
  ),
).subscribe(console.log);

// Stream 4
// This prints: 1a 1b 1c 2a 2b 2c 3a 3b 3c yet again!
smallNumbers$.pipe(
  switchMap(smallNumber => 
    earlyAlpha$.pipe(
      mergeMap(earlyAlpha => of(smallNumber + earlyAlpha))
    )
  )
).subscribe(console.log);

流1不需要在switchMap之后合并,因为它是将数字映射到Observable

流2、3、4都映射到Observable 上,并且每个都表示将最终结果展平为Observable的方式略有不同