Question

我有一个详细信息组件应该显示给定城市的5天预测，并且当我调用http.get（Url）方法时，我能够成功检索数据。

但是我不确定如何将此JSON数据绑定到我的视图。

*我知道如何在列表视图中显示数据，但我不知道如何显示单个对象。

明细组件：

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

  public weatherDetailItem: any;
  private name: any;

  constructor(
    private weatherService: WeatherService,
    private route: ActivatedRoute,
    private location: Location
  ){}

  //This method will retrieve the 5 day forecast for the city name in the route param
  getWeatherItem(){
    this.weatherService.fetchDetail(this.name)
      .do(data => console.log(data))
      .subscribe((data) => {
        this.weatherDetailItem = data;
      })
  }

  goBack(): void {
    this.location.back();
  }

  ngOnInit() {
    this.name = this.route.snapshot.params['name'];
    this.getWeatherItem();
  }


}

fetchDetail（）调用http.get方法并抓取我的数据：

http://api.openweathermap.org/data/2.5/forecast?q=Dallas&units=imperial&appid=f630449a4407b742703bf37d8e8c9057

在我的模板中，我有这个：

<div>
   <h3>CITY:</h3>
   <h3>{{weatherDetailItem}}</h3>
</div>

当我实际加载页面时，它会为我提供 城市：[对象对象] 。我尝试使用 {{weatherDetailItem.city.name}} 访问该JSON数据，但收到错误。有什么想法吗？

由于

Answer 1

this.weatherDetailItem = data.city.name

你能在这里设置细节吗？问题是因为数据是异步加载的，并且在渲染时不存在。

Answer 2

您可以使用?.运算符（用于异步调用）。所以，它应该是

如何在模板

2 个答案:

{{weatherDetailItem？.city.name}}