A object change to undefined?

Question

product.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map'
@Injectable()
export class ProductService {
    private apiUrl = "http://59a4442f42dc220011f771ad.mockapi.io/api/products/";
    constructor(private http: Http) { }
    GetList(): Observable<any[]> {
        return this.http.get(this.apiUrl).map((res: Response) => res.json());
    }
    GetSingle(id: number): Observable<any> {
        return this.http.get(this.apiUrl+id).map((res: Response) => res.json());
    }
}

I have a service like this.

And I have a product list here: product.component.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from "../Shared/Services/products.service";

@Component({
    selector: "app-product",
    templateUrl: "App/Product/product.component.html",

})
export class ProductComponent implements OnInit {
        ngOnInit(): void {
            this.productsService.GetList().subscribe((response: any) => {
            this.products = response;
        });
        }

    public products: any[];
    constructor(private productsService: ProductService){}

}

My problem is there. I can get id and data but when this.product = data. This product is an undefined. I already checked data for sure and I want to know why I failed. I do same way on product.component and success.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from "@angular/router";
import { Subscription } from 'rxjs';
import { ProductService } from "../Shared/Services/products.service";
@Component({
    selector: "app-product-detail",
    templateUrl: "App/Product/product-detail.component.html",

})
export class ProductDetailComponent implements OnInit, OnDestroy {
    public id: number;
    public subscription: Subscription;
    public product;
    constructor(private router: Router, private activatedRoute: ActivatedRoute, public productService: ProductService){}



    ngOnInit(): void {
        this.subscription = this.activatedRoute.params.subscribe(params => {
            this.id = params['id'];
        });
        this.productService.GetSingle(this.id).subscribe((data) => {
            this.product = data;

        });
        alert(this.product);
    }



    ngOnDestroy(): void {
        this.subscription.unsubscribe();
    }
    goToProductPage() {
        this.router.navigate(['product']);
    }
}

Answer 1

The code in the ngOnInit needs to be WITHIN the subscribe of the parameters, like this:

ngOnInit(): void {
    this.subscription = this.activatedRoute.params.subscribe(params => {
        this.id = params['id'];
        this.productService.GetSingle(this.id).subscribe((data) => {
            this.product = data;
            alert(data);
            alert(this.product);
        });
    });
}

That way it will be sure to get the single product every time the parameter changes.