Rxjs行为主体未使用Ionic 4和Angle 7更新UI上的数据

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.

Answer 1

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

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

Answer 2

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()

ie 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.

ie 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.

ie Change from this:

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

To this:

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