Angular 如何从RxJS observable中提取数据

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

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.
    }
});

但我想做的，也是我认为可行的，是创建整个响应的可观察性（正如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']
    }
});

---

我想我很可能会因为期望最终的值和它们到达时的值或者类似的东西而被挂断。如果有人能帮助解释如何获得期望的结果或建议一种不同/更好的方法，我希望有些东西会点击，事情会变得更有意义。

考虑到你的第二种方法，你在

映射

操作符中有一个错误。 基本上，你将一个数组传递给可观察对象，在

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']
      }
    });

---

考虑到第二种方法，在

map

操作符中有一个错误。 基本上，你将一个数组传递给可观察对象，在

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']
      }
    });

---

由于在获得源代码的结果后只需要一些数据操作，而不需要任何事件操作，因此我喜欢简单地使用如下映射：

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']
    }
});

const source=of（响应）；
constimages=source.pipe（map（data=>data.photos.map（x=>x.src））；
image.subscribe（console.log）；

由于在获得源代码的结果后只需要一些数据操作，而不需要任何事件操作，因此我喜欢简单地使用如下映射：

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']
    }
});

const source=of（响应）；
constimages=source.pipe（map（data=>data.photos.map（x=>x.src））；
image.subscribe（console.log）；

这里我用

getImages（）

方法替换了您的客户端调用 除此之外，始终跟踪ngDestroy方法中未订阅的观测值，以防止内存泄漏

让图像；
让imageSrc；
getImages（）：可观察的{
返回此.httpClient.get（url）；
}
this.getImages（）.pipe（）.subscribe（响应=>
{ 
this.images=response.photos；
this.imageSrc=response.map（x=>x.src）
});

这里我用

getImages（）

方法替换了您的客户端调用 除此之外，始终跟踪ngDestroy方法中未订阅的观测值，以防止内存泄漏

让图像；
让imageSrc；
getImages（）：可观察的{
返回此.httpClient.get（url）；
}
this.getImages（）.pipe（）.subscribe（响应=>
{ 
this.images=response.photos；
this.imageSrc=response.map（x=>x.src）
});