Question

在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
    }

不幸的是，尽管我设法使用{{data $ | |显示整个结构，但我无法在模板中显示details.html data $ .temp或任何其他值。 json}}

Answer 1

您可以使用async管道在模板中获取可观察数据：

{{data$ | async | json}}

Answer 2

只需将语法与？如下所示（我的应用程序中的示例，也使用此天气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

尽管我设法将它们显示在我的打字稿文件上，但无法读取模板中可观察到的Json内容项

2 个答案: