0

我有一些复杂的可观察对象链，打算填充 2 个不同的存储（如果为 null），并使用填充的对象创建第三个对象并将其输入模板 | 异步的。

我怀疑我的一个 observables 即将过期，因为当我编辑数据并更新我的商店时，数据并没有反映为已更新。

可观察的链有点像这样：查询存储名册 > 没有名册？> API 调用来填充商店 > 名册？> 清单查询商店 > 没有清单？> API 调用填充商店 > 清单？> 将名册和清单组成注册表 > 模板作为注册表$ | 异步

名册.component.ts：

  ngOnInit(): void {
    this.route.params.pipe(
      switchMap((params: Params) => {
        this.slug = params['slug'] ? params['slug'] : '';
        this.appService.updateState('activeRosterSlug',this.slug);
        this.registry$ = this.slug? this.rosterQuery.composeRegistry(this.slug) : null;
        return this.rosterQuery.selectRoster(this.slug) //also needs the bare roster data to edit as json (and thereby update the store and chain the data back through the subscription that's failing)
      }),
    ).subscribe(roster => {
      this.jsonDirty = false;
      this.data = roster;
      console.log(this.registry$);
    });
  }

名册.query.ts：

  selectRoster(slug:string):Observable<Roster> {
    const roster$ = this.selectEntity(slug).pipe(
      map((roster:Roster) => {
        if (!roster) {
          return this.rosterService.loadRoster(slug).pipe(switchMap(res => this.selectEntity(slug)))
        }else{
          return this.selectEntity(slug);
        }
      }),
      mergeAll()
    )
    return roster$;
  }

  updateRoster(slug:string,roster:Roster){
    this.rosterStore.update(slug,roster);
  }

  composeRegistry(slug:string):Observable<Registry>{
    let roster:Roster;
    const registry$ = this.selectRoster(slug).pipe(
      tap((res:Roster) => roster = res),
      mergeMap((res:Roster) => {
        return this.manifestQuery.selectManifest(res.manifest);
      }),
      map((manifest:Manifest) => {
        let registry: //do stuff to combine roster and manifest
        return registry;
      })
    );
    return registry$;
  }

manifest.query.ts：

  selectManifest(slug:string):Observable<Manifest> {
    const manifest$ = this.selectEntity(slug).pipe(
      map((manifest:Manifest) => {
        if (!manifest) {
          return this.manifestService.loadManifest(slug).pipe(switchMap(res => this.selectEntity(slug)));
        }else{
          return this.selectEntity(slug);
        }
      }),
      mergeAll()
    )
    return manifest$;
  };

名册.service.ts：

  loadRoster(slug:string){
    const rosterApi$ = this.api.rosterSearch(slug).pipe(
      map((res:Response) => {
        let roster:Roster = {
          ...JSON.parse(res[0].roster)
        }
        this.rosterStore.add([roster]);
      }),
    );
    return rosterApi$;
  }

api.service.ts：

  rosterSearch(slug:string){
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };
    const postBody = {slug:slug}
    return this.http.post('/api/rosters/search', postBody, httpOptions);
  }
  manifestSearch(slug:string){
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };
    const postBody = {slug:slug}
    return this.http.post('/api/manifests/search', postBody, httpOptions);
  }

我 90% 确定问题出在我如何编写 this.route.params 的订阅，因为我在另一个使用相同数据的区域中没有看到相同的问题（但没有编辑所以它没有't 链接路由并存储 observables）

编辑：奇怪。删除 observable 组合以支持超时同步调用（以测试事物）并没有改变行为：

  ngOnInit(): void {
    this.route.params.subscribe((params: Params) => {
        this.slug = params['slug'] ? params['slug'] : '';
        this.appService.updateState('activeRosterSlug',this.slug);
        this.registry$ = this.slug ? this.rosterQuery.composeRegistry(this.slug) : null;
      }
    );
    setTimeout(() => {
      this.data = this.rosterQuery.getEntity(this.slug)
    },5000)
  }

它仍然可以在标头中使用，我订阅了路由服务（而不是使用激活路由），但该路由服务似乎在路由器插座中不起作用。

4

0 回答 0