URL请求后，Angular订阅Observable

本文介绍了URL请求后，Angular订阅Observable的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如果我没有为主题和可观察对象使用正确的词汇，请原谅我的行话.

excuse my lingo if I'm not using the correct vocabulary for Subjects and Observables.

无论如何，我想做的是订阅newImages时获得一张图像列表.当前在控制台中，我的答复是

Anyway, what I'd like to do is get a list of images when subscribing to newImages. Currently in the console my response is

[]

[3]

[7]

[9]

其中每个数字都是数组的长度.这是对的.9是正确的长度数组，我正在获取图像列表.

where each number is the length of the array. This is correct. 9 is the correct length array and I'm getting my image list.

但是！我只想将控制台打印出来[9].我不确定为什么要订阅4次.

But! I would just like the console to print out [9]. I'm not sure why I subscribe 4 times.

我如何将订阅延迟到forEach循环完成之前，这样我才不会多次订阅?

How would I delay the subscription until the forEach loop finishes so I'm not subscribing multiple times?

恐怕尝试在HTML组件中显示图像时，我可能会遇到问题.

I'm afraid when trying to display the images in my HTML component I could run into problems.

export class ViewComponent implements OnInit { constructor(private data: Masterdata) { } ngOnInit() { this.data.currentMessage.subscribe(message => this.message = message); } getBabies() { this.data.getBabiesById().subscribe( data => { this.BabiesRooms = data; data.forEach((element) => { this.data.getImagesByBabyId(String(element.idbabyroom)).subscribe(); }); }); console.log("ASDF"); this.data.newImages.subscribe(data => console.log(data)); } }

让我改一下它.getBabies()方法中有两个预订.

Let me rephrase it a litte. There are two subscriptions in the method getBabies().

我只希望在第一个订阅完成后调用第二个订阅.

I only want the second subscription to be called after the first subscription is complete.

推荐答案

您可以使用forkjoin来实现:

You can use forkjoin to make that happen:

Observable.forkJoin( this._myService.makeRequest('Request One', 2000), this._myService.makeRequest('Request Two', 1000), this._myService.makeRequest('Request Three', 3000) ) .subscribe(([res1, res2, res3]) => { this.propOne = res1; this.propTwo = res2; this.propThree = res3; });

还可以利用Rxjs flatMap进行相同的操作:

Also You can make use of Rxjs flatMap for doing the same:

import { switchMap } from 'rxjs/operators'; getBabies() { return this.data.getBabiesById().do(response => { // do something with above response this.BabiesRooms = response; }).flatMap(response => { response.forEach((element) => { this.data.getImagesByBabyId(String(element.idbabyroom)).subscribe(); }); }) }