1

I'm new in angular 2 and there is the possibility that I did not understand the power of the observable. I created a simple service that provides REST call using rxjs :

import {Injectable} from '@angular/core';
import {Http, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Rx';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';


@Injectable()
export class DataService {


  constructor(private http: Http) { }



  postFoo(){

    this.http.get('http://localhost:8080/Sample')
      .map(res=>res.json())

      .subscribe(

        res=>console.log(res)

      );



  }

}

and I called this method in my component in this way:

ngOnInit(){

    this._dataService.postFoo();

  }

All this work fine. Now I want to find a way in which every time there is a change in the data, the component re-calls this method. I read something about .distinctUntilChanged an observable method but I don't know if this is a good way. I'm sorry if the question is not good or if I did not explain well my problem.

Regards

Mr.Moe
  • 507
  • 1
  • 5
  • 19
dstyle
  • 68
  • 9
  • Do you want something like this? http://stackoverflow.com/questions/36261829/angular-2-component-listen-to-change-in-service – Radonirina Maminiaina Mar 14 '17 at 11:29
  • I try to write an example: At the first called my method returned an object with 2 elements. After 5 minutes someone adds another element in this object but I'm seeing the old object yet. To see the new object I must refresh the page(so the component calls the method) so I want to develop a method that how listens a change in the data it re-does the call automatically. – dstyle Mar 14 '17 at 11:40
  • is the adding of new data handled by your app or does it come from somewhere else? – Mr.Moe Mar 14 '17 at 11:43
  • it comes from somewhere else – dstyle Mar 14 '17 at 11:48
  • You have to execute the your `get` method into `post` method, each time user add data, when It's done, `get` method will be invoke. – Radonirina Maminiaina Mar 14 '17 at 11:51
  • basicly what Radonirina says is right. When you want the subscribtion to notify the subscriber that the data have changed you need to have a process that knows about the external data being updated. when the data can change without your app being in control of it you will not be able to detect the change of it, when I'm not mistaken. – Mr.Moe Mar 14 '17 at 11:57
  • "After 5 minutes someone adds another element" who is this someone, is it the same user, on the same page, or you want to get notified when the data on the server has changed (which is not possible with plain HTTP) ? – n00dl3 Mar 14 '17 at 12:12
  • Another user(but also 2 or 3) adds the element. Yes, I want to have a "notice" when the data on the server are changed. – dstyle Mar 14 '17 at 13:39

1 Answers1

1

From official website request service looks like this:

@Injectable()
export class DataService {


  constructor(private http: Http) { }


  postFoo(){

    return this.http.post('http://localhost:8080/Sample')
      .map(this.parseData)

  }

   getFoo(){

      return this.http.get('http://localhost:8080/Sample')
      .map(this.parseData)

  }
  parseData(res: any): void {
      let response = res.json();
      return response;
  }

}

Into your component:

ngOnInit(){
    this.displayFoo();
}

displayFoo() {
    this._dataService.getFoo().subscribe(
         (response) => {
             // display response
         }
    );
}

addFoo() {
     this._dataService.postFoo().subscribe(
         (response) => {
             this.displayFoo();
         }
    );
}

Here, I create method named addFoo which will execute .postFoo() from your service. Let think that you have a button which add your item

<button (click)="addFoo()">Add item</button>

Every time you click on this button, it will invoke the component method addFoo and execute postFoo(). When postFoo() is complete, it will execute getFoo() (here displayFoo()) and your data will be update!

Hope this answer help you!

Regards

Radonirina Maminiaina
  • 6,958
  • 4
  • 33
  • 60