我应该使用哪个 rxjs 运算符从可观察数组中获取值以根据对象属性进行过滤答案

【问题标题】：Which rxjs operator should I use to get values from an observable array to filter based on an object property我应该使用哪个 rxjs 运算符从可观察数组中获取值以根据对象属性进行过滤
【发布时间】：2019-04-02 16:47:21
【问题描述】：

我已经为这个问题绞尽脑汁好几个星期了。我输入了通过 http 请求返回的可观察数组。这个数组输出到控制台。我正在尝试抓取每个项目并检查 properties._hg_layer。

然后将 ngrx 状态选择器分配给 Observable，然后传递给 BehaviorSubject。这会发出数组，但不会让我取出数组内的值。我已经尝试了所有可以想象的运算符组合。我不知道我的问题是否与如何从服务中键入响应或我如何使用运算符有关。它不会让我访问数组的类型成员。就好像它不知道数组对象的属性一样。

我已经尝试在订阅上分配对象类型，但我也无法让它工作。

如果您能提供任何见解或帮助，我们将不胜感激。非常感谢。

【问题讨论】：

我们的好奇，您的特征源（在第三张图片中）被订阅的任何原因，但不是在订阅功能中列出数据？我本来期望像 featureSource.subscribe((data) => {}) 这样的东西。注意数据作为参数。
好调用，但是否调用数据没有区别。我的代码中有另一个带有 'subscribe.((data) => {})' 的实例，但这也不起作用。
所以我在其中一个示例中看到您正在使用管道函数，这让我相信您实际上是在使用较新版本的 rxjs。我会首先检查您是否获得了开始使用的功能。只需订阅 featureSource，通过订阅函数传递数据并打印。如果您获得了数据，那么您可以继续构建其余的逻辑。我这么说，是因为目前看起来带有 map 功能的访问模式并不正确。
您也可以使用 pipe() 代替 subscribe()，然后使用 tap 函数首先打印出数组。然后添加地图或您想要的任何其他内容。我想这就是你开始的方式，这就是为什么订阅最终在函数参数中没有数据（它肯定需要它）
我已经尝试了这两种方法并且都有效。它按预期打印。如第一个屏幕截图所示，同时使用管道和订阅。

标签： angular ngrx rxjs6

【解决方案1】：

试试这个：

this.featureSource.subscribe((features) => {
   // iterate here
   features.map((feature) => console.log(feature.properties));

   // or good ol'
   for (const feature of features) {
      console.log(feature.properties);
   }
})

另外，需要记住你的take(2)will actually emit the features independently，而不是一个数组。如果您要继续使用它，则需要更改上面的代码 sn-p 以处理该项目（基本上只是做您在地图中所做的事情）。

【讨论】：

我之前也试过这个，但是在运行你的例子时，我想我可能已经找到了为什么它不起作用的线索。它告诉我 map 在 '{}' 上不可用...返回的原始响应是一个对象...我正在从响应的子数组映射数组，因此 observable 仍然认为它是一个对象，因此不会让我在上面使用任何数组运算符。
啊，你指的是你的take(2)。上面的示例仅在您传递整个数组时才有效，take(2) 会将项目作为单独的事件单独传递！所以你去:)
从最初的问题开始，我有点不清楚每个部分的位置，但现在有意义

【解决方案2】：

最后它得到了正确的映射顺序。我必须在初始 map() 中映射数组。然后映射订阅上的各个对象。我用以下方法解决了我的问题：

this.updatedLayers$.pipe(
  map((features: Feature[]) => features),
  )
  .subscribe(val => {
    setTimeout(() => {
      featureSubject.next(val.length);
      this.featureSource.next(val);
      console.log('feature data', val);
      val.map(feature => {
        console.log('type', feature.type);
        console.log('properties', feature.properties._hg_layer);
        });
      }, 500);
    });

【讨论】：