Не могу прочитать заметные элементы содержимого Json в моем шаблоне, хотя мне удалось отобразить их в моем файле машинописи - PullRequest
Новая
       7

Не могу прочитать заметные элементы содержимого Json в моем шаблоне, хотя мне удалось отобразить их в моем файле машинописи

0 голосов
/ 27 апреля 2019

Под Ionic4 и внутри компонента я вызвал сервис, который возвращает наблюдаемое. Мне удалось отобразить часть элементов структуры Json, но я не могу сделать это в своем шаблоне. 

// WeatherService.ts
 getWeather(item):Observable<Weather>

  {
    this.ApIurl = `http://api.openweathermap.org/data/2.5/weather?q=${item.city}&units=metric&appid=${this.apikey}`;

  // console.log(this.ApIurl);
    return this.http.get<Weather>(this.ApIurl);
  }

//details.ts
// weatherS declared of type WeatherService

this.weatherS.getWeather(this.locationDetails)
      .subscribe(
        dt => {
          this.data$ = dt; 
// display temperature works fine
console.log(this.data.main.temp);

//json content  returned 

  {
        "temp": 23,
        "pressure": 1015,
        "humidity": 64,
        "temp_min": 22,
        "temp_max": 24
    }

к сожалению, я не могу отобразить в своем шаблоне details.html data $ .temp или любые другие значения, хотя мне удается отобразить всю структуру с помощью {{data $ | JSON}}

Ответы [ 2 ]

1 голос
/ 27 апреля 2019

Просто используйте синтаксис с?Войдите, как показано ниже (пример из моего приложения, которое также использует этот API погоды).В конце ответа, больше информации о?. 

<li>Temperature: {{result?.main?.temp}}</li>

В вашем примере, я надеюсь, что это должно выглядеть так: 

{{data?.main?.temp}}

Если вы хотите быть уверенным в отображении вашегозначение в шаблоне, используйте: 

<div *ngIf="data.length > 0">
    {{data?temp}}
</div>

?- Безопасный навигатор помогает вам работать с асинхронными данными, которые не могут существовать при визуализации шаблона.https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

1 голос
/ 27 апреля 2019

Вы можете получить данные наблюдаемого в шаблонах, используя async pipe: 

{{data$ | async | json}}
...