Ошибка типа: не может прочитать свойство undefined - но сайт работает точно - Angular 7

Question

TypeError: Cannot read property 'city' of undefined

Мое приложение прекрасно отображается в браузере, но я получаю эту ошибку в консоли Chrome, которую я хотел бы понять / исправить.Консоль выдает ошибку 3 раза, обращаясь к файлу / строке CurrentWeatherComponent.html:3, которая <span>{{current.city}}, {{current.country}} </span>

, если я удаляю {{current.city}},, она выдаст ошибку TypeError: Cannot read property 'country' of undefined Дело в том, что в браузере приложение фактическиотображает current город, current страну, current дату и все другие свойства current просто отлично.Поскольку ошибка выводится три раза в консоли, но затем отображается нормально, я предполагаю, что это связано с синхронизацией?

Ниже приведен код для полноты.Дайте мне знать, если (и что) мне нужно опубликовать для более подробной информации.

HTML:

current-weather.component.html:
<div>
  <div>
    <span>{{current.city}}, {{current.country}} </span>
    <span>{{current.date | date:'fullDate'}}</span>
  </div>
  <div>
    <img [src]='current.image'>
    <span>{{current.temperature | number: '1.0-0'}}℉</span>
  </div>
  <div>
    {{current.description}}
  </div>
</div>

Компонент:

current-weather.component.ts
import { Component, OnInit } from '@angular/core'
import { ICurrentWeather } from '../interfaces'
import { WeatherService } from '../weather/weather.service'

@Component({
  selector: 'app-current-weather',
  templateUrl: './current-weather.component.html',
  styleUrls: ['./current-weather.component.css'],
})
export class CurrentWeatherComponent implements OnInit {
  current: ICurrentWeather

  constructor(private weatherService: WeatherService) {}

  ngOnInit() {
    this.weatherService
      .getCurrentWeather('Hilversum', 'NL')
      .subscribe(data => (this.current = data))
  }
}

Answer 1

До того момента, пока функция weatherService.getCurrentWeather не выдаст data, this.current будет undefined, и поэтому вы увидите эти ошибки в консоли.

Вы можете использовать {{current?.city}} и делать то же самоедля всех других свойств current.Или вы можете подождать с рендерингом всех элементов, использующих current, до тех пор, пока он не станет доступен, используя атрибут *ngIf:

<div *ngIf="current">
  <div>
    <span>{{current.city}}, {{current.country}} </span>
    <span>{{current.date | date:'fullDate'}}</span>
  </div>
  <div>
    <img [src]='current.image'>
    <span>{{current.temperature | number: '1.0-0'}}℉</span>
  </div>
  <div>
    {{current.description}}
  </div>
</div>