Angular 2调用函数，在for循环中订阅答案

【问题标题】：Angular 2 call function with subscribe inside a for loopAngular 2调用函数，在for循环中订阅
【发布时间】：2017-07-25 23:06:00
【问题描述】：

我有一个订阅服务的功能：

selectCar(carNumber) {
  this.carService.getCarByNumerator(carNumber)
    .subscribe( (car) => {
                  console.log(carNumber);
                  //more stuff here
                },
                (err) => console.log(err)
               );
}

我想在 for 循环中调用这个函数，如下所示：

for(let carNumber of carNumbers) {
    this.selectCar(carNumber);
}

问题是，有时它可以按我的预期工作，但有时顺序与列表中的不同。

例如清单是：

45
67
89

但是当我查看控制台时，我看到以下内容：

67
89
45

如何强制 for 循环在当前函数调用完成之前不转到下一项？

【问题讨论】：

您可以将函数更改为递归函数，这将有所帮助，但成本会增加。
正在对 API/后端进行异步调用，您不能保证数据将按特定顺序返回。您可以在附加处理/显示之前简单地对结果进行排序/排序吗？否则可以考虑combineAll或Subject等运算符

标签： angular

【解决方案1】：

如果您需要在处理数据列表之前有效地等待所有getCarByNumerator() 完成，您可以使用forkJoin 运算符。

let carNumbers = [1, 2, 3];
let observables = carNumbers.map(carNumber => this.carService.getCarByNumerator(carNumber));

// forkJoin the array/collection of observables
let source = Rx.Observable.forkJoin(observables);

// subscribe and sort combined array/collection prior to additional processing
source.subscribe(x => console.log(x.sort((a, b) => a - b));

这里是 JS Bin 演示功能。该示例演示了从“API”返回数据的不同延迟。

希望对您有所帮助！

【讨论】：

这对我帮助很大！谢谢你，你拯救了我的一天

【解决方案2】：

我猜flatMap 在这种情况下会帮助你。

Observable.of(carNumbers)
.flatMap(term => this.selectCar(term))
.subscribe( (car) => {
        console.log(carNumber);
        //more stuff here
    },
    (err) => console.log(err)
);

【讨论】：

感谢您的回答。我有两个问题： 1. selectCar 的内容似乎会出现两次，不是吗？正如你们俩所说的那样，然后再做一次。 2. 如果我尝试这个，我在尝试向 selectCar 发送术语的部分出现错误。它说它接受一个车号，但得到一个完整的数组。它的术语类型是什么？数组中的一项还是所有数组？