Angular4 не может прочитать список свойств undefined

У меня есть этот составная часть, который передает метод другому составная часть. Делалось это так:

constructor(
  public categoryData: CategoryDataService
) {
}

И html для передачи метода выглядел так:

[list] = "categoryData.list"

Это работало нормально, пока у метода list не было параметров. Теперь у меня есть метод, у которого есть параметры, но я могу получить параметры из составная часть, поэтому я создал такой метод-оболочку:

listCriteria() {
  this.criteriaData.list(this.category.id);
} 

Но когда я добавляю этот html:

[list] = "listCriteria"

дает мне ошибку:

ERROR TypeError: Cannot read property 'list' of undefined

Для справки вот как выглядит сервис:

import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http/src/response';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

import { ICriteria } from './interfaces/criteria.shared';

const API_URL = environment.apiUrl;
const API_Path = '/criteria';

@Injectable()
export class CriteriaDataService {
  constructor(private _http: HttpClient) { }

  public list = (categoryId: string, includes?: string): Observable<ICriteria[]> => {
    return this._http
      .get<ICriteria[]>(API_URL + API_Path, { params: { categoryId: categoryId, includes: includes || '' } })
      .catch(this.handleError);
  }

  private handleError(error: HttpErrorResponse) {
    return Observable.throw(error);
  }
}
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
441
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ключевое слово функции this в JavaScript ведет себя немного иначе.

Значение this определяется тем, как вызывается функция.

Когда вы передаете функцию другому компоненту, вы должны убедиться, что он будет вызываться с правильным контекстом.

Самый простой способ сделать это - просто использовать тот же метод, который вы использовали в своей службе: функция стрелки экземпляра

listCriteria = () => this.criteriaData.list(this.category.id);

Таким образом, this будет ссылаться на правильный экземпляр компонента.

Другие вопросы по теме