Ошибка типа Angular8: невозможно прочитать свойство 'forEach' из неопределенного - PullRequest
Новая
       20

Ошибка типа Angular8: невозможно прочитать свойство 'forEach' из неопределенного

0 голосов
/ 21 марта 2020

Я уже искал решение, но ни одно из них не работает.

После нажатия кнопки «Изменить» он перенаправляет меня на событие редактирования, и я получаю:

ОШИБКА TypeError : Невозможно прочитать свойство 'category' из неопределенного 

  ngOnInit() {
    this.eventService
    .getEventById(this.route.snapshot.params.id)
    .subscribe((ev) => this.event = ev);

После подписки, если я сделаю это: console.log (this.event), оно вернет мне значение undefined. Где .subscribe(console.log(ev)); возвращает мне объект. Не знаю, почему this.event = ev не работает, я уже использовал это в другом компоненте, и отображение работает.

Служба: 

getEventById(id) {
    return this.httpClient.get<EventsDto>(this.urlevent + '?id=' + id);
  }

В edit-event.component. html, {{event.name}} печатается, как это возможно, если this.event не определено, как мы видели ранее с: .subscribe((ev) => this.event = ev)

1 Ответ

1 голос
/ 21 марта 2020

tl; dr - Сгруппируйте свои асинхронные логи c, вызвав this.http.get() внутри функции нажатия кнопки, и примените любые нижестоящие логи c в рамках subscribe() метода

. Когда вы работаете с асинхронным кодом, вы должны проявить особую осторожность, чтобы асинхронные функции (например, ваш запрос this.httpClient.get) вернули данные, прежде чем пытаться с ними работать, отобразите их и т. д. c.

Как вы правильно заметили, ваш .subscribe(console.log(ev)) правильно регистрирует данные, а синхронный console.log(ev) - нет. Это связано с тем, что синхронный console.log(ev) будет выполнен сразу после того, как ваш this.httpClient.get() был вызван. Поскольку для возврата асинхронных данных требуется некоторое время, переменная ev по-прежнему undefined в момент времени, когда запускается синхронный console.log(ev). Вызов console.log(ev) из вашего блока subscribe() вместо этого специально ожидает, пока данные не будут возвращены из this.httpClient.get() перед выполнением, гарантируя, что ev будет иметь запрошенные вами данные (или ошибку).

Имея это в виду, простой способ смягчить вашу проблему - это вызвать запрос this.http.get() внутри события нажатия кнопки и включить любые последующие функции в функцию .subscribe(). Это позволит компилятору гарантировать доступность некоторых данных во время вызова последующих функций.

. html

<button (click)="buttonClick()></button>

.ts 

buttonClick() {
  this.eventService
    .getEventById(this.route.snapshot.params.id)
    .subscribe(ev => {
      this.event = ev
      // your code here, e.g. createEventsDto(ev)
    });
...