Observable 订阅中的变量获取空值

Question

我知道 Observables 需要一些时间来获取数据，而 javascript 保留运行其他代码，这让我很困扰。

我在我的 angular 项目中使用了 ngrx。在这里，我试图从商店中获取一些工作正常的数据。然后，我将此数据流转换为 string[]，这也能正常工作。要使用这个 string[] 我 subscribe 这个 observable。在订阅中，我尝试将该值分配给名为 filterSizeValues.

的其他值

这里，问题来了。如果我 console.logthis filterSizeValues 最初我得到了一个空数组。当 observable 完成他的工作时 filterSizeValues 变量被数据填充。

但我不能努力 filterSizeValues 变量最初是空数组。我能做什么？

我已经在互联网上搜索了解决方案，但没有任何效果。

请帮帮我。非常非常感谢。

这是我的代码；

this.sizeTargetingStore$.dispatch(SizeTargetingActions.getSizeTargeting({
        campaignId: this.campaignId,
        lineItemId: this.lineItemId
      }));

这里是访问商店获取数据。

this.sizeTargeting$
      .pipe(switchMap(sizes=>{
        let temporary:string[] = [];
        sizes.forEach(eachSize=>{
          temporary.push(eachSize.name);
        })
        this.filterSizeValues$ = of(temporary);
        return this.filterSizeValues$;
      }))
      .subscribe(size_name=>{
        this.filters.set('size_name', size_name);
      })

在这里，我正在尝试 set 过滤器值。

这个方法我也试过

this.sizeTargeting$
      .pipe(switchMap(sizes=>{
        let temporary:string[] = [];
        sizes.forEach(eachSize=>{
          temporary.push(eachSize.name);
        })
        this.filterSizeValues$ = of(temporary);
        return this.filterSizeValues$;
      }))
      .subscribe(size_name=>{
        this.filterSizeValues = size_name
      })
      this.filters.set('size_name', this.filterSizeValues);

但所有方式过滤器都设置为空数组。有人可以帮我吗？

Answer 1

通常当我订阅我正在等待的东西时 return 我所做的是设置一个主题：

  private componentDestroyed$ = new Subject<void>();

然后在 Observable 管道和订阅中我这样做：

this.sizeTargeting$
    .pipe(takeUntil(this.componentDestroyed$))
    .subscribe((sizes: YourTypeHere[]) => {
       if(sizes) {
           //Do what I need to do with my sizes here, populate what I need,
           //dispatch any other actions needed.
       }
    })

Answer 2

据我了解，您有 2 种可能性，要么过滤掉空值，要么跳过第一个值。您可以分别使用 filter 和 skip rxjs 运算符。

此外，我认为您滥用了 switchMap 运算符，因为您没有在 switchMap 中使用异步操作，我们可以改用 map 运算符，所以下面我有带有 2 个选项的简化代码版本可以解决您的问题。

选项 1：

this.sizeTargeting$.pipe(
  filter(sizes => sizes.length > 0),         // filter out empty array values
  map(sizes => sizes.map(size => size.name)) // perform your remap
).subscribe(sizes => {
  this.filterSizeValues = size_name;         // Only arrays with values will reach this step
});

选项 2：

this.sizeTargeting$.pipe(
  skip(1),                                   // skip the first value
  map(sizes => sizes.map(size => size.name)) // perform your remap
).subscribe(sizes => {
  this.filterSizeValues = size_name;         // Only arrays with values will reach this step
});

Observable 订阅中的变量获取空值

variable inside Observable subscription gets empty value

javascript

angular

ngrx

ngrx-store

rxjs-observables