退订在Angular应用程序中出现错误?

时间:2019-01-14 04:33:26

标签: angular typescript observable

我正在订阅REST呼叫

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;
}

我想在ngOnDestroy()

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

但是在销毁时,我遇到了错误。

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)

帮我解决这个问题。

2 个答案:

答案 0 :(得分:1)

作为最佳实践,您可以做的是创建一个订阅数组并将订阅推送到该数组。然后在销毁循环上使用循环退订

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

答案 1 :(得分:1)

您正在将 unsubscribe 存储在变量中,这意味着您需要error,但如果存储时有undefined,则该变量值将为 undefined 。因此,请先检查unsubscribe,然后再检查// Destroying the component. ngOnDestroy() { if(this. empObs0) this.empObs0.unsuscribe(); }

produces = MediaType.APPLICATION_PDF_VALUE

如果您有更多可观察到的东西,那么按照@sachila建议的方式进行操作将是更好的做法