Within my Angular application, a network request is sent to retrieve filtered data based on user-selected filters. The function responsible for handling the filter values and executing the request is outlined as follows:
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);
};
The app also features UI components that allow users to change branches, which consequently affects data filtering throughout the application. To propagate this branch change across various components, I'm utilizing an event emitter via a shared service.
My objective here is to respond to these events and trigger the network request once more, with backend systems managing the actual filtering process.
An issue arises when attempting to handle the event notification from the emitter and call the respective function in the receiving component:
this.branchChangeSub = this.branchInfoService.selectedBranchChange.subscribe(this.onBranchChange);
Following the reception of the event notification, trying to reinitiate the network request using the following code snippet results in an error:
public onBranchChange(values) {
console.log('announceBranchChange firing...');
if (values) {
console.log('have values...');
this.onFilterReceived(values); // Resend the network request
}
}
The resulting error message reads:
TypeError: Cannot read property 'onFilterReceived' of undefined
This situation leads me to question why the onFilterReceived() function becomes undefined at this point. Although the function can be successfully invoked during the component's initialization stage, encountering difficulties after receiving the branch change event suggests a deeper misunderstanding of the underlying mechanics.