0

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']);
    }
}
Bùi Đắc Thịnh
  • 1
  • Hi - are you saying that when you call this --> this.product = data --> it tells you that 'this.product' is undefined? – diopside Aug 28 '17 at 20:15
  • In ProductDetailComponent, it looks like `this.id` is not defined when you're trying to get the product detail from the API. But it also looks like this API call is depended on the ID of the route param, so you should either nest the observable which brings you the ID with the API call or use `switchMap`. – Catalyst Aug 28 '17 at 20:17
  • i already checked it. And this.id has value. I want my code easy to understand, i am also new in angular 2 so im not familiar with that. Can give me a example? Thanks. – Bùi Đắc Thịnh Aug 29 '17 at 02:09

1 Answers1

0

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.

DeborahK
  • 57,520
  • 12
  • 104
  • 129