“ObjectUnsubscribedError”- while reloading the angular data table using get call

Question

this.Showdata = false;
this.showSpinner = true;
this.subscription = this.assessmentlistService.getAll().subscribe(response => {
        if (response != null) {
            if (response.StatusCode >= 200 && response.StatusCode < 300) {
                this.AssessmentList = response.Data;
                this.Showdata = true;
            }
            else {
                //this.AssessmentList = [];
            }
            this.updateAssessmentList.next();
        }
        this.showSpinner = false;
    },
    error => {
        this.messageData = new MessageData();
        this.messageData.Message = "Server Error, please try again later";
        this.messageData.ShowErrorMessage = true;
        this.showSpinner = false;
    }
);

This is my api calling method. I tried the unsubscribe method. It is not working.the Below Code i used to refresh the data table for every 1 minute.

Refresh() {
    setInterval(() => {
        this.subscription.unsubscribe();
        this.Showdata = false;
        this.showSpinner = true;
        this.subscription = this.assessmentlistService.getAll().subscribe(response => {
                if (response != null) {
                    if (response.StatusCode >= 200 && response.StatusCode < 300) {
                        this.AssessmentList = response.Data;
                        this.Showdata = true;
                    }
                    else {
                        //this.AssessmentList = [];
                    }
                    this.updateAssessmentList.next();
                }
                this.showSpinner = false;
            },
            error => {
                this.messageData = new MessageData();
                this.messageData.Message = "Server Error, please try again later";
                this.messageData.ShowErrorMessage = true;
                this.showSpinner = false;
            }
        );
    }, 60000);
}

Iam Getting this error when im trying to reload the datatable.

ObjectUnsubscribedError {name: "ObjectUnsubscribedError", stack: "ObjectUnsubscribedError: object unsubscribed↵ a…odule/AssessmentListComponent.ngfactory.js:549:5)", message: "object unsubscribed", ngDebugContext: DebugContext_, ngErrorLogger: ƒ} message : "object unsubscribed" name : "ObjectUnsubscribedError" ngDebugContext : DebugContext_ {view: {…}, nodeIndex: 74, nodeDef: {…}, elDef: {…}, elView: {…}} ngErrorLogger : ƒ () stack : "ObjectUnsubscribedError: object unsubscribed↵ at new ObjectUnsubscribedError (webpack-internal:///./node_modules/rxjs/_esm5/util/ObjectUnsubscribedError.js:22:26)↵ at Subject._trySubscribe (webpack-internal:///./node_modules/rxjs/_esm5/Subject.js:105:19)↵ at Subject.Observable.subscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:166:93)↵ at DataTableDirective.ngOnInit (webpack-internal:///./node_modules/angular-datatables/src/angular-datatables.directive.js:23:28)↵ at checkAndUpdateDirectiveInline (webpack-interna l:///./node_modules/@angular/core/esm5/core.js:12627:19)↵ at checkAndUpdateNodeInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14151:20)↵ at checkAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14094:16)↵ at debugCheckAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14987:76)↵ at debugCheckDirectivesFn (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14928:13)↵ at Object.eval [as updateDirectives] (ng:///AssessmentModule/AssessmentListComponent.ngfactory.js:549:5)" proto : Error

Answer 1

If you want to repeat your code every 1 minute, use the Observable 's interval operator is much more convenient and cleaner:

Observable
    .interval(60*1000) //one minute
    .flatMap(() => this.assessmentlistService.getAll())
    .subscribe(response => {
        if (response != null) {
            //.... your other code
        }
    });

The .flatMap() allows you to repeatedly call the getAll() API after every resolve (think repeated subscribes).