如何在模板中显示单个 JSON 对象

Posted 2023-03-13

【中文标题】如何在模板中显示单个 JSON 对象

【英文标题】：How do I display a single JSON object in the template

【发布时间】：2017-02-09 10:19:55

【问题描述】：

我有一个详细组件，它应该显示给定城市的 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>

当我实际加载页面时，它给了我 City: [object Object]。我尝试使用 weatherDetailItem.city.name 访问该 JSON 数据，但收到错误。有什么想法吗？

谢谢

【问题讨论】：

你是怎么得到City:[Object Object]的？如果是真的，那么它应该是weatherDetailItem?.city[0].name。

我认为这是因为我做了subscribe((data) => this.weatherDetailItem = data;) 然后使用weatherDetailItem 显示它，这可能是显示数据对象本身而不是内部数据。如果我打电话给weatherDetailItem.city.name，我会收到一条错误消息“无法读取未定义的属性‘城市’。

【参考方案1】：

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

weatherDetailItem?.city.name

【讨论】：

谢谢！这就是我要找的。​​span>

【参考方案2】：

this.weatherDetailItem = data.city.name

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

【讨论】：

哦，好吧，我刚刚将我的 getWeatherItem() 方法更改为：this.weatherService.fetchDetail(this.name).subscribe((data) => this.weatherDetailItem = data.city.name;)，当我在模板中调用 weatherDetailItem 时，现在可以显示城市名称。如何将其余数据绑定到我的 weatherDetailItem？例如，如果我想调用weatherDetailItem.city.name 和weatherDetailItem.list[0].main.temp