Angular Javascript Массив объекта из объекта воспроизведения

Question

Я новичок в Angular. Я попытался сделать массив объектов из ReplaySubject.

Здесь у меня есть массив ReplaySubject, и я делаю цикл и подписываю данные внутри него и pu sh в переменную массива.

var combine_data = [];
this.productService.getLot(product_ids.join('-')).forEach(function(data){
    data.subscribe(v => {
        combine_data.push(v);
    });
});

результат, когда я на нем console.log, будет выглядеть следующим образом

Я попытался сделать combine_data.find(data => data.id === 92); и его возвращение не определено.

И я попытался создать фиктивный массив объектов, используя простой для итерации

var test = [];
for(var i=0;i<4;i++){
    test.push({id:i,name:'name'});
}

, и результат этого фиктивного массива, когда я на нем console.log, сильно отличается от предыдущего

Используя этот фиктивный массив, я получил (4)[{..}{..}{..}{..}, и я могу сделать .find, но используя первый массив, я получил [], и я не могу сделать .find на нем.

Вот результат this.productService.getLot(product_ids.join('-'))

А вот функция productService.getLot

public getLot(id: string){
    var _this = this;

    var result = [];
    var ids = [];
    ids = id.split('-');
    ids.forEach(function(product_id){
        if (_this.products[product_id] == null) {
            _this.products[product_id] = new ReplaySubject<any>();
            _this.http.get(`https://xxxx.com/api/products/${product_id}`)
                .subscribe(data => {
                    _this.products[product_id].next(data)
                });
        }

        result.push(_this.products[product_id]);
    });

    return result;
}

Это тот же самый метод pu sh данных в переменную. Но почему я получил другой результат? Я действительно не понимаю.

Я просто делаю стек стлиц для своей задачи HttpClientCombineData

Answer 1

Итак, вы начинаете с массива идентификаторов продуктов, соединяете их в - отдельную строку, а затем в сервисе вы разбиваете эту строку и создаете массив ReplaySubject, который затем выдает ответ запрос http в.

Предполагая, что вы хотите выполнять свои запросы http параллельно, вам было бы намного проще упростить это с помощью forkJoin. forkJoin объединяет несколько наблюдаемых в один набор параллельных наблюдаемых и возвращает значение, когда все они завершены.

component.ts

this.productService.getLot(product_ids).subscribe(combine_data => {
  console.log(combine_data); // [ {...}, {...}, ... ]
});

service.ts

public getLot(productIds: []): Observable<[]> {
  // create array of observable requests
  // these are only invoked when the component subscribes to this observable

  const observables = productIds.map(productId => 
    _this.http.get(`https://xxxx.com/api/products/${productId}`));

  return forkJoin(observables);
}