Question

在我的ngOnInit（）方法中，我调用数据服务来检索产品数据。在此调用之后，我立即调用本地方法getProductImages（），以从先前检索的产品中获取图像，但是我得到一个错误：产品：Product []数组是getProducts（）调用的结果未定义。显然，在调用dataService.getProducts（）之前调用getProductImages（）方法。代码如下所示。我该如何解决这个问题。

export class WelcomeComponent implements OnInit {
  products: Product[];
  productImages: ProductImage[];

  constructor(private welcomeService: WelcomeService, 
    private dataService: DataService) { }

  ngOnInit() {
   this.dataService.getProductsDb()
    .then(products => {
      this.products = products;      
      console.log('WelcomeComponent products = ' + new Date() +
       JSON.stringify(this.products))

       this.getProductImages();
       console.log('productImages = ', JSON.stringify(this.productImages))
 })
      // .then(this.dataService.getProductImages();)
  }

  private getProductImages() {
    for(var i=0; i < this.products.length; i++) {
      this.productImages[i]._id = this.products[i]._id;
      this.productImages[i].name = this.products[i].name;
      this.productImages[i].price = this.products[i].price;
      this.productImages[i].image = this.products[i].image[0];
    }
  }

}

Answer 1

设置this.products后，需要调用getProductImages（）。发生了什么事情是他们同时被召唤而不是一个接一个地被召唤。您可以使用以下代码解决此问题，我相信：

ngOnInit() {
this.dataService.getProductsDb()
.then(products => {
  this.products = products;      
  console.log('WelcomeComponent products = ' + new Date() +
   JSON.stringify(this.products))


})
.then(
    this.getProductImages();
   console.log('productImages = ', JSON.stringify(this.productImages));
)
  // .then(this.dataService.getProductImages();)
}

然而，我会研究Observables，它们非常有用。你的变量看起来像：

products: Observable<any>;

productImages: Observable<any>;

然后你的功能可能如下：

this.dataService.getProductsDb()
.map(response => response.json())
.subscribe(response => {
  this.products = response;
},
  error => console.log(error),
  () => {
    this.getProductImages();
    console.log('productImages = ', JSON.stringify(this.productImages));
  });

您可以在https://github.com/reactivex/rxjs和http://reactivex.io/

阅读更多内容

Angular 2：由于竞争条件而不存在HTTP数据

1 个答案: