Проблемы с отправкой сетевого запроса успешно после уведомления отправителя события в приложении Angular

Question

В моем приложении Angular я отправляю сетевой запрос на возврат некоторых отфильтрованных данных на основе выбранных пользователем фильтров.Это работает, как ожидалось.Функция, которая принимает значения фильтра и делает запрос похожим на это:

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

Теперь, в приложении, у нас также есть некоторый пользовательский интерфейс, который позволяет пользователю изменять ветвь, которая будет фильтровать все данные на всем протяженииприложение впоследствии.Поскольку пользовательский интерфейс изменения ветви находится в другом компоненте, я использую источник событий en, чтобы объявить об этом изменении другим компонентам через общую службу.

Моя цель - получить уведомление об этом событии, а затем снова запустить сетевой запрос.Бэкэнд будет обрабатывать фильтрацию данных оттуда.

Проблема, с которой я сталкиваюсь, заключается в том, что после успешного получения уведомления о событии через отправитель события и передачи ссылки на функцию для запуска, которая выглядит так впринимающий компонент:

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

... когда я снова запускаю функцию сетевого запроса через этот код:

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

... Я получаю эту ошибку:

TypeError: Невозможно прочитать свойство 'onFilterReceived' из неопределенного

Это то, где я запутался.Почему onFilterReceived() здесь не определено?Почему я могу успешно запустить эту функцию, когда компонент загружается, но не после того, как я получаю уведомление об изменении ветви.Здесь есть кое-что, что я в корне неправильно понимаю.

Answer 1

Попробуйте обновить вызов до onBranchChange() в subscribe, чтобы использовать функцию стрелки для сохранения контекста this:

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

Надеюсь, это поможет!