属性未定义在组件中通过订阅get方法在ngOnInit（）

以外我在控制台登录选定的属性时在ngOnInit它提供了控制对象，但在此块之外，当我控制此属性它是未定义的。可有些怎样的帮助得到它的工作..或任何其他解决方案属性未定义在组件中通过订阅get方法在ngOnInit（）

 import { Product } from './../../Models/ProductModel'; 
     import { Component, OnInit } from '@angular/core'; 
     // import { Subscription } from "rxjs/Rx"; 
     import 'rxjs'; 
     import { Router, ActivatedRoute } from '@angular/router'; 
     import { ProductService } from 'app/products/product.service'; 
     @Component({ 
      selector: 'app-product-detail', 
      templateUrl: './product-detail.component.html', 
      styleUrls: ['./product-detail.component.css'] 
     }) 
     export class ProductDetailComponent implements OnInit { 
      public selectedProduct: Product; 
      private productIndex: string; 
      // private subscription: Subscription; 

      constructor(private router: Router, 
         private route: ActivatedRoute, 
         private PService: ProductService) { } 

      ngOnInit() { 

      this.route.params.subscribe(
       (params: any) => { 
       this.productIndex = params['id']; 

     } 
      ); 


       this.PService.getProduct(this.productIndex).subscribe((data: any) =>{ 
       // return the object 
       console.log(data.product) 

       return this.selectedProduct = data.product, 
       //output the here object 
       console.log(this.selectedProduct); 

     } 

       ); 

     // output undefined 
       console.log(this.selectedProduct); 


      } 







this is the getProduct method in my service 

    getProduct(id:string){ 
    const headers = new Headers({ 'Content-Type': 'application/json' }); 
     return this.http.get('http://localhost:3000/products/'+id, { headers : headers}) 
     .map((response: Response) => response.json()) 
     .catch((error: any) => 
     { 

     this.ErS.getError(error.json()); 
     return Observable.throw(error); 
     }) 



    }

来源

2017-06-22 Mustafa Muhammad

可能的重复[如何返回从angular2中的Observable/http/async调用的响应？]（https://stackoverflow.com/questions/43055706/how-do-i-return-the-response- from-an-observable-http-async-call-in-angular2） – Alex

你甚至检查过重复的问题吗？它在回调之外始终是未定义的。 – Alex

谢谢。很多.. :) –

我认为这个代码的目的是reget数据每次路由参数的变化？如果这是正确的，那么getProduct调用需要在subscribe方法中。

像这样：

 ngOnInit() { 

     this.route.params.subscribe(
      (params: any) => { 
      this.productIndex = params['id']; 

      this.PService.getProduct(this.productIndex).subscribe((data: any) =>{ 
      // return the object 
      console.log(data.product) 

      return this.selectedProduct = data.product, 
      //output the here object 
      console.log(this.selectedProduct); 
      }); 
    }); 

      // output undefined 
      console.log(this.selectedProduct); 
    }

因为当组件被初始化，在对产品进行检索它是最后执行的的console.log将显示一个未定义的。

这里是正在发生的事情：

组件被初始化并运行ngOnInit。
该参数已订阅。
底部的控制台日志尝试显示所选的产品，并且没有...因此未定义。
处理参数变更，执行 params.subscribe()中的代码。
该参数从路线中获得并用于调用 getProduct。
从getProduct返回的Observable已订阅。
在稍后的时间点，数据将从后端服务器返回，getProduct().subscribe()内的代码将执行。
getProduct().subscribe()内的两个console.logs是执行并显示相应的产品。

有意义吗？

来源

2017-06-22 21:27:34 DeborahK

其实我正在做与上述相同..没有运气 –

你是什么意思？这里你真正的问题是什么？ – DeborahK

属性未定义在组件中通过订阅get方法在ngOnInit（）

回答

相关问题