Angular 2 Property subscribe does not exist on type Promise <any>

0
votes

I have imported 'rxjs/add/operator/toPromise';

In my Ts file i have something like:

onChange(categoryid) {
//console.log('testing')
this.productService.getProductsOncategory(categoryid).subscribe(data => {
  if (data.success) {

    console.log('Products obtained');
  } else {
    console.log('Not obtained!');
  }
 });
}

I get error:

Property 'subscribe' does not exist on type 'Promise'.

getProductsOncategory(category_id) {

let catUrl = "API URL"
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let catIdObj = JSON.stringify({ category_id: category_id })
return this.http.post(catUrl, catIdObj, { headers: headers })
  .toPromise()
  .then((response: Response) => response.json().data)
  //.map((response: Response) => response.json())
  //.do(data => console.log(JSON.stringify(data)))
  .catch(this.handleError);

}

How to i change the snippet if i have to use ' then(data => '...

2
javascriptangular

2 Answers

2
votes

subscribe method is for 'Observable', so you can just return an Observable Object. then do what you want to do like this

getProductsOncategory(category_id): Observable<Response>{

        let catUrl = "API URL"
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        let catIdObj = JSON.stringify({ category_id: category_id })
        return this.http.post(catUrl, catIdObj, { headers: headers })
  }

this.productService.getProductsOncategory(categoryid)
    .map(response => response.json().data)
    .subscribe(data => doSomething(data),err => catchErr(err));
0
votes

just map the http request and return it. no need to create a new promise 

getProductsOncategory(category_id) {

    let catUrl = "API URL"
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let catIdObj = JSON.stringify({
        category_id: category_id
    })

    return this.http.post(catUrl, catIdObj, {
            headers: headers
        })
        .map((res: Response) => res.json());
}