CODEWITHSUNDEEP
angulartypescriptobservable
Rajath
Rajath

Reputation: 2981

Unsubscribe is giving error in Angular application?

I'm Subscribing for a REST call

this.empObs0 = this.fetchData.getEmployeeInfoToUpdate(JSON.parse(this.empName0)).subscribe(
  data0 => {
    this.emp_DBRows0 = <EmpUpdateModel[]> data0;
  },
  error => {
    console.log(error);
  }
);

FetchDataService.ts

// gets the employee information to update the employee info
getEmployeeInfoToUpdate(jsonArray: JSON): Observable<EmpUpdateModel[]> {
  console.log('GET getEmployeeInfoToUpdate');
  this.dataGS =  this.http.post<Observable<EmpUpdateModel[]>>('/api/getEmployeeInfoToUpdate', jsonArray);
  return this.dataGS;
}

I want to destroy this in ngOnDestroy() 

// Destroying the component.
ngOnDestroy() {
  console.log('Destroy called');
  this.empObs0.unsubscribe();
}

But while destroying I'm getting below error.

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'unsuscribe' of undefined
TypeError: Cannot read property 'unsuscribe' of undefined
    at UpdateTeamRosterComponent.push../src/app/components/update-team-roster/update-team-roster.component.ts.UpdateTeamRosterComponent.ngOnDestroy (update-team-roster.component.ts:176)
    at callProviderLifecycles (core.js:18943)
    at callElementProvidersLifecycles (core.js:18911)
    at callLifecycleHooksChildrenFirst (core.js:18901)
    at destroyView (core.js:19963)
    at callWithDebugContext (core.js:20722)
    at Object.debugDestroyView [as destroyView] (core.js:20406)
    at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.destroy (core.js:18232)
    at ComponentRef_.push../node_modules/@angular/core/fesm5/core.js.ComponentRef_.destroy (core.js:18068)
    at RouterOutlet.push../node_modules/@angular/router/fesm5/router.js.RouterOutlet.deactivate (router.js:4858)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:14134)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

Help me out with this.

Upvotes: 1

Views: 3017

Answers (2)

Ganesh
Ganesh

Reputation: 6016

Your are storing the Observable in a variable that means you need to unsubscribe it but if you have any error while storing it, then the variable value will be undefined. So check for undefined first then unsubscribe it

// Destroying the component.

ngOnDestroy() {
  if(this. empObs0) 
    this.empObs0.unsuscribe();
}

If you have more observables then it will be better practice to do it in way that @sachila suggested

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41417

As a best practice what u can do is create a subscription array and push the subscriptions to that array. Then on the destroy cycle unsubscribe to it using a loop

subscriptions: Subscription[] = [];


this.subscriptions.push(this.fetchData.getEmployeeInfoToUpdate(JSON.parse(this.empName0)).subscribe(
  data0 => {
    this.emp_DBRows0 = <EmpUpdateModel[]> data0;
  },
  error => {
    console.log(error);
  }
));

 ngOnDestroy() {
        this.subscriptions.forEach(subscription => {
            subscription.unsubscribe();
        });
  }

Upvotes: 1

Related Questions