CODEWITHSUNDEEP
angular
noname
noname

Reputation: 271

Angular 2 Observable Refresh

I'm trying to refresh my table at parent after update operation from child component.

@service

getLicenses(){
     ...
     return this.http.post(url","",options)
        .map((result: Response) => result.json())
          .map((data: License[]) => {
              this.licenses = data;

              return this.licenses;
            })
            .catch(this.handleError);
}

@ parent component

 ngOnInit() {
    this.licenseService.getLicenses().subscribe(licenses => {
                                          this.licenses = licenses;
 });

Everything looks good at initialization. I have datas in table. When a row is selected from table I pass it to child component and do update operation. After update, I want to refresh table and call getLicenses() method of service. But it doesn't refresh.If I call another method to test, it refreshes my table.

  getLicenses2(){
    this.licenses.pop();
    this.licenses.pop();
    this.licenses[2].isFree=  !this.licenses[2].isFree;
  }

Also I tested like below and this doesn't refresh.

  getLicenses2(){

       this.http.post(url,"",options)
            .map((result: Response) => result.json())
              .map((data: License[]) => {
                  this.licenses = data;
                  this.licenses.pop();
                  this.licenses.pop();
                })
                .catch(this.handleError);
  }

Why does this work when I change array manually? Why does not work when I assign data of json?

My response is OK there is no exception and first initialization works well.Update operation is succesfull also if I just refresh table with f5 new data is coming. (I'm new to Angular 2)

Edit

It work with or without subject if I just change array but it doesnt work when I do it in http post

I tried with Subject. This time there is no child. Initialization does not work when I call http post. see test methods below.

@service i have

private licenses2 = new Subject<License[]>();
licenses2$ = this.licenses2.asObservable();

@ parent component 

 ngOnInit() {
    this.licenseService.licenses2$.subscribe(licenses => {
        this.licenses = licenses;
     } );
    this.licenseService.getLicenses2();
 }

works

getLicenses2() {
   let test: License[] = [];
   test.push(new License());

   this.licenses2.next(test)
}

doesnt work

 getLicenses2(){
   this.http.post(URL,"",options)
        .map(response => {
              this.licenses2.next(response.json() as License[])
        })
        .catch(this.handleError);
  }

Thank you.

Upvotes: 2

Views: 4663

Answers (1)

AVJT82
AVJT82

Reputation: 73337

One solution is to use a Subject. As from what I understand from your comments, you are trying to update the parent table from the child, and that will not work, since the updates are only present in the child if you do so. So what you can do, is to tell the parent to update the data when you need to do it. So try the following:

Declare a Subject in your parent:

public static updateStuff: Subject<any> = new Subject();

and in your parent constructor subscribe:

ParentComponent.updateStuff.subscribe(res => {
    // here fire functions that fetch the data from the api
    this.getLicenses(); // add this!
})

and in your child component, whenever you make changes that should be updated in parent do this: 

ParentComponent.updateStuff.next(false);

e.g when after doing a post request in your child:

// this is the method you call in your child component to do the post request
postChanges() { 
  this.myService.updateTable()
     .subscribe(data => {
        this.data = data;
        ParentComponent.updateStuff.next(false); // add this, will update the parent!
  })
}

... and then it should work :) Remeber to also unsubscribe :)

Upvotes: 2

Related Questions