Question

产品服务：

   product:IProduct;
  products:IProduct[] = [];
  id:number;
  constructor(private productSevice:ProductService, private route: ActivatedRoute) { 

  }

  ngOnInit(): void {
    this.id= parseInt(this.route.snapshot.paramMap.get('id'));
     console.log(this.productSevice.products)

    this.productSevice.getById(this.id).subscribe(data => {
      this.product = data;
      console.log(data)

    })
console.log(this.product)
  }

产品：

  product:IProduct = null;

  id:any;

无论我在尝试什么，产品为空！

当我在订阅中执行console.log时，我可以看到数据！但是产品仍然为空。 | ->我也尝试过onInit同样的结果-<< / p>

Answer 1

  constructor(private productSevice:ProductService, private route: ActivatedRoute) { 

    this.id = this.route.snapshot.paramMap.get('id'); // line 'x'

    this.productSevice.getById(this.id).subscribe(data => {

      this.product = data; // line 'y'
    });

    console.log(this.product)   // line 'z'
 }

首先执行行'x'和'z'，然后在从请求中获得响应的稍后时间，将传递传递给订阅的函数。因此，如果您尝试将产品记录在此功能之外，则不会看到data，因为尚未分配this.product。

因此您可以检查this.product是否在订阅块内正确分配。

  constructor(private productSevice:ProductService, private route: ActivatedRoute) { 
    this.id = this.route.snapshot.paramMap.get('id');
    this.productSevice.getById(this.id).subscribe(data => {
      this.product = data;
      console.log(this.product)
    });
 }

在构造函数中发送HTTP请求不是一个好习惯。在ngOnInit生命周期挂钩中执行此操作。

角9订阅null

1 个答案: