Angular6 rxjs unsubscribing to timer subscription OnDestroy does not work?

SebastianG

So I have a timer where I call an api every 60 seconds (it's a digital signage app so there won't be any interaction yet I want it to auto update)

I have various components that load different api calls but the problem is, when I'm trying to unsubscribe to these timer subscriptions ondestroy it simply does not work.

I go in, test by routing to 2 components back and forth 5-6 times. This should normally kil subscription everytime I go to the next one.

After 60 seconds passes, there's as many api calls being made as many times I've switched between those two. so I've created a timer subscription everytime I went on one of the components but did not destroy them.

EDIT, added my full OnInit and OnDestroy code below:

ngOnInit() {

    let mainTimer = timer(0, 60000);

    this.dataSourceSubscription = mainTimer.subscribe(t => {
      this.service.getSection3();
      this.dataSourceSubscription = this.section3.subscribe(data => {
        let countAccepted = data => {
          for (let i = 0; i < data.length; i++) {
            if (
              data[i].DeliveryStatus == "Accepted" &&
              data[i].BookingId == "0"
            ) {
              this.multidropAccepted++;
            }
          }
        };

        let countDepartedSite = data => {
          for (let i = 0; i < data.length; i++) {
            if (
              data[i].DeliveryStatus == "Departed Site" &&
              data[i].BookingId == "0"
            ) {
              this.multidropDepartedSite++;
            }
          }
        };


        let countPending = data => {
          for (let i = 0; i < data.length; i++) {
            if (
              data[i].DeliveryStatus == "Pending" &&
              data[i].BookingId == "0"
            ) {
              this.multidropPending++;
            }
          }
        };

        let countOnSite = data => {
          for (let i = 0; i < data.length; i++) {
            if (
              data[i].DeliveryStatus == "On Site" &&
              data[i].BookingId == "0"
            ) {
              this.multidropOnSite++;
            }
          }
        };

        let countTurnedAway = data => {
          for (let i = 0; i < data.length; i++) {
            if (
              data[i].DeliveryStatus == "Turned Away" &&
              data[i].BookingId == "0"
            ) {
              this.multidropTurnedAway++;
            }
          }
        };


        (this.dataSource = new MatTableDataSource(
          data.filter(
            (value, index, array) =>
              !array.filter(
                (v, i) => JSON.stringify(value) == JSON.stringify(v) && i < index
              ).length
          )
        )),
          (this.dataSource.sort = this.sort),
          (this.dataSource.paginator = this.paginator),
          this.multidropAccepted = 0;
          this.multidropDepartedSite = 0;
          this.multidropPending = 0;
          this.multidropOnSite = 0;
          this.multidropTurnedAway = 0;
          countAccepted(data),
          countDepartedSite(data),
          countPending(data),
          countOnSite(data),
          countTurnedAway(data),
          this.totalDeliveries = data.length;
      });

      this.lastUpdated.subscribe(data => {
        console.log(data);
      })
    })


    let pageTimer = timer(10000, 10000);

    this.pageSubscription = pageTimer.subscribe(t => {
      if (
        this.dataSource.paginator._pageIndex ==
        this.dataSource.paginator.getNumberOfPages()
      ) {
        this.dataSource.paginator.firstPage();
      } else {
        this.dataSource.paginator.nextPage();
      }
    });
  }

  ngOnDestroy() {
    this.dataSourceSubscription.unsubscribe();
    this.pageSubscription.unsubscribe();
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
Xinan

So from what you described in the question, generally speaking, I don't think there is anything wrong with how you subscribe & unsubscribe the observable.

Which means the mistake must be something silly.

To investigate further, please check:

  1. Is there any typo with your code?

  2. Is ngOnDestroy() really executed? - put a console log there and see if it really gets called when you switch away from your current page. If not, you probably staying the same route rules even if the page seems to be changed.


The subscription gets overwritten so it's no longer pointing to the timer. When you destroy (unsubscribe) it, it's actually unsubscribe the inner observable, not the timer observable.

this.dataSourceSubscription = mainTimer.subscribe(t => {
  this.dataSourceSubscription = this.section3.subscribe(data => {});
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Rxjs Subscription does not work in a Angular Directive

rxjs6 Timer not being triggered in Angular 6 subscription to observable timer placed in service

angular rxjs subscription teardown

Angular + rxjs: No provider for Subscription

RxJs Subscription does not get fired in the root angular module

Angular2 - Rxjs Subject run twice even after unsubscribing

Unsubscribing in angular

Angular6 and Bootstrap4 collapsible div does not work

Dropdown in Angular6 with Bootstrap 4.1.3 does not work

rxjs6 'share()' does not work with 'of(...)'?

rxjs 6 countdown timer subscribe angular 6

Immediately unsubscribing from RxJS Observable

Angular Routing and RxJs subscription sharing

Angular RxJS Subscription Reference Value

Angular 10, rxjs - looping on subscription?

Angular RxJS Subject subscription and unsubsciption

Why does Rxjs unsubscribe on error in the subscription callback?

Subscription after switchMap does not work

How to import rxjs timer in angular 6?

Unsubscribing Multiple Subscription from Different Functions

Windows Service not stopping, stuck at unsubscribing ews subscription

rxjs timer in angular7

Angular 6 - observable subscription doesn't work

Unsubscribing from valuechanged doesnt work

Unsubscribing in Angular NGXS

Why does event unsubscribing work ("not leak") if using a lambda returned from a method?

Angular12, rxjs: safe to use takeWhile without onDestroy?

Unsubscribing to rxjs observable using takeUntil and combineLatest not working

Is there a way to re-subscribe after unsubscribing RxJS?