如何从 RxJS observable 中提取数据答案

【问题标题】：How to extract data from RxJS observable如何从 RxJS observable 中提取数据
【发布时间】：2020-05-01 21:11:34
【问题描述】：

我最近一直在学习 Angular，并试图更好地理解 RxJS。假设我有一个来自 HttpClient.get 的 API 响应，它为我提供了以下 JS 对象的 Observable：

const response = {
  photos: [
    {
      id: 1,
      src: '1.jpg',
    },
    {
      id: 2,
      src: '2.jpg',
    },
    {
      id: 3,
      src: '3.jpg',
    }
  ]
}

我正在寻找的最终结果是：['1.jpg', '2.jpg', '3.jpg']

我可以执行以下操作来一次获取每个单独的 src：

const source = from(response.photos);
const images = source.pipe(
    pluck('src')
);
images.subscribe({
    next(x) { 
        console.log(x); // results in: 1.jpg 2.jpg 3.jpg, one item per line.
    }
});

但我想做的，我认为可行的，是创建整个响应的 observable（因为它会从 Angular 的 http.get() 调用中给出）并将所有 src 属性作为数组，像这样：

const source = of(response);
const images = source.pipe(
    pluck('photos'),  // i expect this to be [{ id: 1, src: '1.jpg' }, ... ]
    map(x => x.src),  // i expect x to to be { id: 1, src: '1.jpg' } (but it is not)
);
images.subscribe({
    next(x) { 
        console.log(x); // i expect x to be the result of the map call earlier, i.e. ['1.jpg', '2.jpg', '3.jpg']
    }
});

我想我可能会因为期望最终值与到达时的值或类似的东西而挂起电话。如果有人可以帮助解释如何获得所需的结果或提出不同/更好的方法，我希望有些事情会点击并且事情会开始变得更有意义。

【问题讨论】：

标签： angular rxjs

【解决方案1】：

由于您在获取源结果后只需要一些数据操作而无需任何事件操作，因此我喜欢简单地使用这样的映射：

const source = of(response);
const images = source.pipe(map(data => data.photos.map(x => x.src)));
images.subscribe(console.log);

【讨论】：

【解决方案2】：

考虑到您的第二种方法，map 运算符中有错误。基本上，您将一个数组传递给 observable，并且在 map 运算符中，结果应该是一个数组，而不是像您在那里对待它的对象。

正确的代码如下：

const source = of(response);
    const images = source.pipe(
      pluck("photos"),
      // here map over the output which is an array
      map(x => x.map(y => y.src))
    );
    images.subscribe({
      next(x) {
        console.log(x); // the result is: ['1.jpg', '2.jpg', '3.jpg']
      }
    });

【讨论】：

【解决方案3】：

在这里，我用getImages() 方法替换了您的客户电话除此之外，始终跟进在 ngDestroy 方法中取消订阅 observables 以防止内存泄漏


let images;
let imageSrc;

getImages(): Observable<any> { 
 return this.httpClient.get(url);
}

this.getImages().pipe().subscribe(response => 
{ 
  this.images = response.photos;
  this.imageSrc = response.map(x => x.src)
});

【讨论】：