Question

我在评论中提到当我在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);
      })



    }

Answer 1

我假设每次路由参数更改时，此代码的目的是重新获取数据？如果这是正确的，那么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是执行并显示相应的产品。

有意义吗？

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

1 个答案: