代码之家 › 专栏 › 技术社区 › Maniraj Murugan

从角度服务获取最终数据

angular-services angular6 typescript angular javascript

Maniraj Murugan · 技术社区 · 6 年前

product_id 这是一个数组,

product_id: any = ["123", "456"];

恩戈尼特:

  ngOnInit() {
    this.product_id.forEach(element => {
      this.httpClient.get('https://api.myjson.com/bins/hiolc').subscribe(res => {
        this.productList = [];
        res.products.forEach( item => {
          this.productList.push(item);
        });
      })
    })
    console.log(this.productList);
  }

console.log(this.productList); ,我需要 预期结果 作为,

   [{
      "product_name": "Product One",
      "product_information": {
        "template_details": [
          {
            "template_name": "RACE Template",
            "productProperties": [
              {
                "property_id": 2518427931,
                "property_name": "Length",
                "property_value": "12 cm"
              },
              {
                "property_id": 2621195440,
                "property_name": "Width",
                "property_value": "10 cm"
              },
              {
                "property_id": 2621195441,
                "property_name": "Height",
                "property_value": "20 cm"
              }
            ]
          }
        ]
      }
    },
    {
      "product_name": "Product Two",
      "product_information": {
        "template_details": [
          {
            "template_name": "RACE Template",
            "productProperties": [
              {
                "property_id": 2518427931,
                "property_name": "Length",
                "property_value": "15 cm"
              },
              {
                "property_id": 2621195440,
                "property_name": "Width",
                "property_value": "12 cm"
              },
              {
                "property_id": 2621195441,
                "property_name": "Size",
                "property_value": "Medium"
              }
            ]
          }
        ]
      }
    }]

但是这给了 空数组[] ..

如何等待服务完成,然后将数据存储到 productList ..

我需要福莱赫, this.product_id.forEach(element

请帮助我存储完成整个服务后的数据,基于 forEach 发送所有产品id后,获取最终产品列表。。

https://stackblitz.com/edit/flatternstructure-dvzpjv

我又一次说清楚了 product value 喜欢 https://api.myjson.com/bins/hiolc + element ..

如果我拿到决赛 产品列表 然后我需要用final做另一个功能所以只有我希望在 产品列表 终于不在里面了 ..

7 回复 | 直到 6 年前

dun32 6 年前

使用rxjs.concat:

在上可用 stackblitz

...
import { concat } from 'rxjs';
import { map } from 'rxjs/operators';
...

ngOnInit() {
  this.productList = [];
  concat(
    this.product_id.map(
      element => this.httpClient.get('https://api.myjson.com/bins/hiolc')
    )
  ).pipe(
    map((res: any) => this.productList = this.productList.concat(res.products))
  ).subscribe(res => {
    console.log(res);
    console.log(this.productList);
  });
}

希望有帮助。

Zlatko 6 年前

首先,日志要很快。你发出请求( ids.forEach(id => this.http....) ). 然后在那之后,你做一个 console.log this.productList.push(...) 声明,你会看到的。

第二个问题是触发并行请求用这句话: this.productList = []

你只想做一次。

ngOnInit() {
  forkJoin(product_ids) // fire them in parallel.
    .pipe(
       map(id => this.http.get('https://api.myjson.com/bins/hiolc' + id)),   // fetch the things
       map(items=> this.productList = this.productList.concat(items)),
    )
    .subscribe(() => console.log('Done, items:', this.productList));

更好的版本是:

 ngOnInit() {
    this.someService.getProductItems(productIds)
        .subscribe(productList => this.productList = productList);
}

意思是,将Http调用转移到一个服务中,在那里做所有这些事情,并保持组件更干净、更简单。

andrea06590 6 年前

为什么不按照angular文档中的描述创建一个真正的服务呢?

https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent

我建议您首先创建一个可注入的服务,该服务将用于像httpClient这样的组件构造函数中

Vikram Jain 6 年前

你能试试这个吗:

ngOnInit() {
    let counter = 0;
    this.productList = [];
    this.product_id.forEach(element => {
      this.httpClient.get('https://api.myjson.com/bins/hiolc').subscribe(res => {
        res.products.forEach( item => {
          this.productList.push(item);
        });
        counter = counter + 1;
        if(counter === this.product_id.length){
            console.log(this.productList);  
            // call your next operation here
        }
      })
    })
}

zmag 6 年前

更新:

import { zip } from 'rxjs'
....
ngOnInit() {
  const obs = []
  this.product_id.forEach(element => {
    obs.push(this.httpClient.get('https://api.myjson.com/bins/hiolc'))
  })
  zip(...obs).subscribe(res => {
    res.forEach(r => this.productList.push(...r.products))
    console.log(this.productList)
  })
}

斯塔克布利茨: https://stackblitz.com/edit/flatternstructure-nk9yha

ams 6 年前

StackBlitz

import { forkJoin } from 'rxjs';

....

ngOnInit() {
    forkJoin(
      this.product_id.map(element => this.httpClient.get('https://api.myjson.com/bins/hiolc'))
    )
    .subscribe((res) => {
        this.productList = this.productList.concat(res);
        console.log(this.productList);
    });
}

Maksim Romanenko 6 年前

这样也可以:

this.productList$ = from(this.product_id).pipe(
    mergeMap(() =>  this.httpClient.get('https://api.myjson.com/bins/hiolc')),
    scan((productList, item) => [...productList, item], [])
    tap((productList) => console.log(productList))
).subscribe(() => {}) // or async pipe in a template