Не удается получить доступ к вложенному объектному ключу JSON: значение в Typescript

#javascript #angular #typescript

#javascript #угловой #typescript

Вопрос:

Когда я присваиваю объект TypeScript ключу (temp) вложенного объекта JSON (main):

 weatherToday : any;

getTheWeather(city : String)
  {
    console.log("HOME.TS: Getting the weather...");
    this.weather.getWeather("Dublin").subscribe( data => {
      this.weatherToday = data.main.temp;

    });

  }

А затем вывести объект weatherToday в home.html:

 <p>{{weatherToday}}</p>

Результат соответствует ожидаемому:
284.73

Однако, когда я пытаюсь назначить Typescript общему родительскому объекту JSON:

 this.weatherToday = data;

И затем попытайтесь вывести то же, что и выше, с помощью синтаксиса object.object.value в моем home.html:

  <p>{{weatherToday.main.temp}}</p>

Я получаю исключение:

undefined не является объектом

Это структура JSON:

 {
  "coord": {
    "lon": -121.94,
    "lat": 37.7
  },
  "weather": [
    {
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 284.73,
    "feels_like": 282.68,
    "temp_min": 283.71,
    "temp_max": 286.48,
    "pressure": 1025,
    "humidity": 62
  },
  "visibility": 10000,
  "wind": {
    "speed": 1.2,
    "deg": 63
  },
  "clouds": {
    "all": 1
  },
  "dt": 1608145061,
  "sys": {
    "type": 1,
    "id": 4446,
    "country": "US",
    "sunrise": 1608131813,
    "sunset": 1608166239
  },
  "timezone": -28800,
  "id": 5344157,
  "name": "Dublin",
  "cod": 200
}

Поэтому я не совсем уверен, почему возникает это исключение.
Я использую Ionic v3.

1. Вы уверены weather.main.temp , что существует для города "Dublin" , а не использовать переданный в param ? Также можно сделать это в шаблоне <p>{{weatherToday?.main?.temp}}</p>

2. @Passersby, который работает, какой эффект имеет ‘?’?

3. Он не будет пытаться получить доступ к каким-либо более глубоким свойствам, если данный родительский элемент не определен / null

4. Я вижу, но если переменная существует для заданных родительских / дочерних элементов, что, по-видимому, имеет место в данном случае, почему она не будет работать без ‘?’

5. Я предполагаю, что произошла ошибка с привязкой. Может ли предоставить папку, в которой хранятся html и TS вместе с самими файлами? Я предполагаю, что мы просматриваем что-то небольшое.

Ответ №1:

 this.weather.getWeather("Dublin").subscribe(data => {
      this.weatherToday = data.main.temp;

    });
 <p>{{weatherToday}}</p>