RxJs 循环遍历返回的数组答案

【问题标题】：RxJs looping over returned arrayRxJs 循环遍历返回的数组
【发布时间】：2018-07-27 00:26:23
【问题描述】：

有没有更好的方法使用 RxJS 运算符循环从可观察对象返回的数组而不是发出新的单个列表项？

onGetItemData(){
this.dataService.getItemData().subscribe((itemData) =>
{
  this.itemDataJSON = itemData;
  this.itemDataJSON.forEach(function (value) {
    let new_listing = new ListingItem(value.label,value.market,value.name);
    console.log(new_listing);
  });
 });
}

API 返回包含项目的单个数组，因此我无法使用 .map 访问 itemData.name

//-- DataService --// 
getItemData(){
 return this.http.get(this._URL, { headers })
        .pipe(map((res: Listings) => res.items))
}

【问题讨论】：

flatten 可能是您想要的。 this.http.get(this._URL, { headers }) .pipe(flattten(), map(item => item.name))

标签： angular rxjs angular2-observables rxjs-pipeable-operators

【解决方案1】：

为什么不直接发送map() ？

this.dataService.getItemData()
    .pipe(
        map(itemData => {
            return itemData.map(value => {
                return new ListingItem(value.label, value.market, value.name);
            })
        })
    )
    .subscribe((listingItem) => {
        console.log(listingItem) // gives an array of listingItem
    });

注意.map() 是 JavaScript 的原生数组函数，您将使用它来转换数据，通过循环遍历数组的每个项目

只为单行：

.pipe(
    map(itemData => itemData.map(value => new ListingItem(value.label, value.market, value.name)))
)

【讨论】：

原因是由于 itemData.map 上的这个错误：[ts] Property 'map' does not exist on type 'Object' any.... 那是因为 itemData 是一个包含数组的对象?
@user4003765 是的。但是在您的代码中，您已经在itemData 中使用了.forEach()。那么它是对象还是数组？除非您发布可以重现问题的堆栈闪电战，否则只有您最了解您的代码，而我们局外人不可能尝试猜测错误所在的所有可能性。

【解决方案2】：

我自己还在学习 Observables，但我认为您可以像我在 StackBlitz 中所做的那样从数组创建 Observable：https://stackblitz.com/edit/angular-tbtvux

简而言之（在 Angular 6 中）：

import { from, pipe } from 'rxjs';
...
let observable = from([10, 20, 30])
  .subscribe(v => console.log(v));

所以也许你可以在你的 observable 上通过管道传递 switchMap 运算符，它返回一个数组，如下所示：

import { switchMap } from 'rxjs/operators';
...
yourArrayObservable$.pipe(
  switchMap(val => from(val))
);

... 然后你可以像这样使用 map ：

import { switchMap, map } from 'rxjs/operators';
...
yourArrayObservable$.pipe(
  switchMap(val => from(val)),
  map(val => val * 42)
);

...至少这似乎在我前面提到的 StackBlitz 中有效。

更新：我认为 flatMap 运算符也可以类似地工作，只有一个运算符：

yourArrayObservable$.pipe(
  flatMap(val => val * 42)
);

【讨论】：

from(val) 错误：[ts] 'Object' 类型的参数不可分配给'ObservableInput>' 类型的参数。