Rxjs Behavior subject not updating data on the UI using ionic 4 and angular 7

Question

I have an array of type BehaviourSubject defined and initialized in service and it gets updated upon editing it using another function. However, the results displayed on the UI are not of the new edited array but the changes are successfully applied to the external database on a server.

I have tried many online solutions but still, it won't work.

Here is the code for the Array initialization in the service named 'ServicesService'.

private _nationalProps: BehaviorSubject<NationalProp[]> = new BehaviorSubject<NationalProp[]>([]);

Here is the function in the service to access the array as an observable;

get national() {
    return this._nationalProps.pipe(take(1), map(nprops => {
      return [...nprops];
    })
    );

}

Here is the function in the service for deleting one element in the array. First, it deletes it on the server than on the local array.

deleteNationalProp(id: string) {
    return this.http.delete(this.serverUrl + `/national_props/${id}.json`)
          .pipe(
          switchMap(() => {
            return this._nationalProps;
          }),
          take(1),
          tap(props => {
      this._nationalProps.next(props.filter(b => b.id !== id));
    }));
  }

This is the code in another component where I subscribe to the BehaviourSubject to keep track of any changes;

propSub: Subscription; // imported from rxjs
loadedProps: NationalProp[];

ngOnInit() {
 this.propSub = this.servicesSrv.national.subscribe(props => {
      this.loadedProps = props;
    });

I call the delete method in the service to remove one element using this function;

this.servicesSrv.deleteNationalProp(pId).subscribe();

What I expected was that once I delete an element from the array it should also be removed from the list on the UI without having to refresh the page or revisit the page but this does not seem to work.

I will appreciate your help on how to solve this.

score 0 · Answer 1 · answered Jul 18 '19 at 02:30

0

Try after removing take(1) from national property like this:

get national() {
    return this._nationalProps.pipe(map(nprops => {
      return [...nprops];
    })
    );
}

answered Jul 18 '19 at 02:30

user2216584

5,387
3
22
29

This only works on the first delete after loading the page. any other delete that follows does not reflect on the UI – Stephen Mutua Jul 18 '19 at 20:07

score 0 · Answer 2 · answered Jul 19 '19 at 00:33

I managed to solve my own problem. Anyone with similar issue can try my solution below.

I had to subscribe to the observable in the ionViewWillEnter() life cycle hook instead of ngOnInit()

i.e Change subscription from here:

ngOnInit() {
 this.propSub = this.servicesSrv.national.subscribe(props => {
      this.loadedProps = props;
    });

To here:

ionViewWillEnter() {
 this.propSub = this.servicesSrv.national.subscribe(props => {
      this.loadedProps = props;
    });

Also to unsubscribe I had to do it in the ionViewWillLeave and not ngOnDestroy.

i.e Change unsubscribe from here:

ngOnDestroy() {
    if (this.proposalsSub) {
      this.proposalsSub.unsubscribe();
    }
  }

to here:

ionViewWillLeave() {
    if (this.proposalsSub) {
      this.proposalsSub.unsubscribe();
    }
  }

Also I changed the function in the service to return as observable.

i.e Change from this:

get national() {
    return this._nationalProps.pipe(take(1), map(nprops => {
      return [...nprops];
    })
    );

To this:

get national() {
    return this._nationalProps.asObservable();
    );

Rxjs Behavior subject not updating data on the UI using ionic 4 and angular 7

2 Answers2