Angular using rxjs operator to change boolean flag

Question

I'm trying to refactor a get http request. The code that I'm using now is getting the data from service and in the subscribe method also changing a boolean flag

 this.eventsService.getEvents(this.pageSize, this.currentPage).subscribe(
  (data) => {
    this.busy = false
    this.events = data.events
  }
);

I've refactor to use Observable on my view, and this code looks this way now, component code:

const $results = this.eventsService.getEvents(this.pageSize, this.currentPage);
this.$events = $results.pipe(tap(() => { this.busy = false } ), map(data => data.events));

view code (nativescript) :

<ListView *ngIf="!busy" [items]="$events | async" ></ListView>

it does provide proper content in the view but the busy flag is not changed in the tap operator. Is it feasible to somehow change boolean in the pipe() ?

Where is the subscribe in the refactored code? I'm not sure about the context of this code. Is it in a method? Should it be this.$results? — DeborahK
– DeborahK, Commented Jul 21, 2021 at 20:16
$events, I've added one line from my view in the description — luk
– luk, Commented Jul 21, 2021 at 20:22
If it's displaying the proper content in the view, then busy must be false? (Your refactored code looks basically OK, so wondering if there is something else amiss?) — DeborahK
– DeborahK, Commented Jul 21, 2021 at 20:23

Gaël J · Accepted Answer · 2021-07-21 20:27:35Z

1

The thing is:

your component won't be displayed until busy is false because of *ngIf="!busy"
the $events won't be subscribed until the component is displayed (reminder: nothing happens in an Observable chain until there's a subscription)

Thus this cannot work: the subscription will not happen because the flag is true, and the flag will stay true because there's no subscription.

To workaround this, I'd subscribe in the Typescript code and get rid of the async pipe.

answered Jul 21, 2021 at 20:27

Gaël J

15.9k5 gold badges25 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular using rxjs operator to change boolean flag

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related