Problems Sending Network Request Successfully after Event Emitter Notification in Angular App

Question

In my Angular app I send out a network request to return some filtered data based on user-selected filters. This is working as expected. The function that takes in the filter values and makes the request looks like this:

public onFilterReceived(values)
{
    let languageFilter = [];
    let cityFilter = [];
    let zipFilter = [];
    let firstNameFilter = [];
    let lastNameFilter = [];

    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
            this.pn_zip_e = params['pn_zip.e'];
            this.pn_firstName_e = params['pn_firstName.e'];
            this.pn_lastName_e = params['pn_lastName.e'];
            this.pn_city_e = params['pn_city.e'];
            this.pn_language_e = params['pn_language.e'];
        }
    );

    this.pn_language_e === "1" ? languageFilter = values['language'] : languageFilter = [];
    this.pn_city_e === "1" ? cityFilter = values['city'] : cityFilter = [];
    this.pn_zip_e === "1" ? zipFilter = values['zip'] : zipFilter = [];
    this.pn_firstName_e === "1" ? firstNameFilter = values['firstName'] : firstNameFilter = [];
    this.pn_lastName_e === "1" ? lastNameFilter = values['lastName'] : lastNameFilter = [];

    this.sendDebouncedRequest(this.page, this.pagesize, languageFilter, cityFilter, zipFilter, firstNameFilter, lastNameFilter);
};

Now, on the app, we also have some UI that lets the user change the branch, which will filter all data throughout the app subsequently. Because the branch change UI is in a different component I am using en event emitter to announce this change to other components via a shared service.

My goal is to receive notification of this event, and then fire off the network request again. The backend will handle the data filtering from there.

The problem I'm running into is that, upon successfully receiving the event notification via the event emitter and passing reference to the function to fire, which looks like this in the receiving component:

this.branchChangeSub = this.branchInfoService.selectedBranchChange.subscribe(this.onBranchChange);

... when I go to fire off the network request function again via this code:

public onBranchChange(values) {
    console.log('announceBranchChange firing...');
    if (values) {
        console.log('have values...');
        this.onFilterReceived(values); // Resend the network request
    }
}

... I get this error:

TypeError: Cannot read property 'onFilterReceived' of undefined

This is where I'm confused. Why is onFilterReceived() undefined here? Why can I successfully fire this function when the component loads, but not after I receive notification of the branch change. There's something I'm fundamentally misunderstanding here.

score 2 · Accepted Answer · answered Feb 18 '19 at 18:37

2

Try updating the call to onBranchChange() within subscribe to use an arrow function to preserve the context of this:

this.branchChangeSub = this.branchInfoService.selectedBranchChange.subscribe(values => this.onBranchChange(values));

Hopefully that helps!

answered Feb 18 '19 at 18:37

Alexander Staroselsky

37,209
15
79
91

It looks like that was the problem. Many thanks, @Alexander! – Muirik Feb 18 '19 at 18:41
Glad to hear it helped. Be sure to mark the answer if it resolved your issue. Thanks! – Alexander Staroselsky Feb 18 '19 at 18:44

Problems Sending Network Request Successfully after Event Emitter Notification in Angular App

1 Answers1