如何等到来自ngrx存储的数据被处理？答案

【问题标题】：How to wait until the data from ngrx store is processed?如何等到来自ngrx存储的数据被处理？
【发布时间】：2021-07-31 22:58:32
【问题描述】：

我正在从组件中的 ngrx 存储中获取数据。在 map 函数中，我处理数据并准备在组件中显示。最终结果存储在对象中。该组件通过查询参数实现过滤器。我订阅了激活的路由来获取当前的查询参数，然后过滤我的数据。当我尝试访问已处理的对象时，我收到的是空对象。如何在订阅查询参数时从ngrx store获取处理后的结果？

events$: Observable<Event[]>;
eventsByDay = {}; // empty object for proccessed data

ngOnInit(): void {
    this.events$ = this.store.pipe(
      select(EventQuery.getAllEvents),
      filter((events) => events.length > 0),
      map((events: Event[]) => {

      // some logic to proccess data from store

      this.eventsByDay = { //proccessed data };

      return events;
      });
    
    this.activatedRoute.queryParams.subscribe((queryParams) => {
        console.log(this.eventsByDay); --> empty
    });      
}

【问题讨论】：

标签： angular typescript ngrx

【解决方案1】：

您可以使用combineLatest 等到两个可观察对象都发出一些东西：

import { combineLatest } from 'rxjs'

...

ngOnInit(): void {
  this.events$ = this.store.pipe(
    select(EventQuery.getAllEvents),
    filter((events) => events.length > 0),
    map((events: Event[]) => {
      // some logic to proccess data from store
      this.eventsByDay = { //proccessed data };
      return events;
    });

  // don't forget to unsubscribe!
  combineLatest([this.activatedRoute.queryParams, this.events$])
    .subscribe(([query, events]) => {
      console.log(events, query);
      console.log(this.eventsByDay); // will be the same as events
    });
}

【讨论】：