• Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

112
Views
Cannot read property 'next' of undefined

I'm subscribing to an observable so that anytime my subscribeToTasks() call in my service fails, it will ultimately invoke the code in my subscriptionError() method from my component, which in this example is just a simple alert. The problem is, anytime an error on this call occurs and this.newSubscriptionFailure.next() gets invoked, I get the following error in my browser console:

Cannot read property 'next' of undefined

How is newSubscriptionFailure undefined when you can clearly see it being defined above the method? That code should get hit long before the error in the api call happens. I've used this approach in the past and it has always worked, the only difference I can think of is that I'm calling .next() in the service (same file that newSubscriptionFailure is defined) whereas I normally call .next() in a separate component file. What am I doing wrong? Is there a way I can get this to work, or a better approach to take?

Code from my service:

import { Observable } from 'rxjs/Observable';
import { Subject }    from 'rxjs/Subject';

public subscribeToTasks(period: string, stripeToken: string): Observable<any> {        
    let body = JSON.stringify({ period, stripeToken });
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });        
    return this.authHttp.post(this.apiTasks, body, options).map(response => {
        return response.json();
    }).catch(this.newSubscriptionError);
}


newSubscriptionFailure = new Subject();
newSubscriptionFailure$ = this.newSubscriptionFailure.asObservable();

public newSubscriptionError() {
    this.newSubscriptionFailure.next();
}

code from my component:

ngOnInit(): void {
    this.subscriptionError();
}

subscriptionError(){
    this.subscriptionsService.newSubscriptionFailure$.subscribe(() => {
        alert('call failed');
    });
}
10 months ago · Santiago Trujillo
2 answers
Answer question

0

Change

}).catch(this.newSubscriptionError);

to

}).catch((e)=>this.newSubscriptionError());

or

}).catch(this.newSubscriptionError.bind(this));

your this is not refering to the Injectable otherwise

10 months ago · Santiago Trujillo Report

0

In case anyone else has the same issue I had. I was using a subject called this.destroy$ that I call next on in the OnDestroy method. Using it in the subscribed observable like: .takeUntil(this.destroyed$). I had forgotten to initialise this destroy$ object. After using destroy$: Subject<any> = new Subject<any>(); the error went away.

10 months ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.