PUT request with angular2 in ionic2

Question

I need help making a clickable list which toggles color on click. I already know how to read data from an external site, but now I want to PUT data to that site. I've already got it to work with postman.

http://www.external.tld/page/{id}
name = test
color = toggle

So I already got JSON data like this:

{"id":"6","name":"test1","color":"red"},
{"id":"7","name":"test2","color":"red"}

This is the current html code which retrieves the data:

<ion-item *ngFor="let data of data" [style.backgroundColor]="data?.color" (click)="PostData(data?.id)">
  {{data?.name}}
</ion-item>

So now I need to have a working PostData function which uses the PUT method to toggle the color between red and green and send it to a page like above.

So for example if I click on the list with id: 6, name: test1 and color: red this should be outPUTted:

http://www.external.tld/page/6
name = test1
color = green

The code I got so far which doesn't work:

PostData(data:any) {
    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({ headers: headers });
    return this.http.post('http://www.external.tld/page/'+data, JSON.stringify(data), options)
        .map((res: Response) => res.json());
}

Answer 1

You need to subscribe when you work with Observables because they are lazy:

PostData(data:any) {
    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({ headers: headers });
    return this.http.post('http://www.external.tld/page/'+data, JSON.stringify(data), options)
        .map((res: Response) => res.json())
        .subscribe(
        res => {
            console.log(res); // this should print server's response after you post data
        },
        error => {
            console.log(error); // this will print error if it occurs
        });
}