如何使用Angular 7在html中显示JSON数据？

Question

我从OpenWeatherMap API得到以下JSON响应。 我想在HTML表格中显示CityName，CityCode，温度和说明。

JSON响应：

cnt : 1
list
0
coord
  lon : 79.85
  lat : 6.93
sys
  type : 1
  id : 9098
  message : 0.0032
  country : "LK"
  sunrise : 1554597365
  sunset : 1554641358
weather
  0
main
  temp : 30
  pressure : 1010
  humidity : 70
  temp_min : 30
  temp_max : 30
visibility : 10000
wind
  speed : 2.6
  deg : 200
clouds
  all : 20
dt : 1554655382
id : 1248991
name : "Colombo"

HTML档案：

<table class="table table-hover">
          <thead>
            <th>City</th>
            <th>City Code</th>
            <th>Temperature</th>
            <th>Description</th>            
          </thead>
          <tbody>
            <tr>
              <td>{{weather.list.name}}</td>
              <td></td>
              <td></td>
              <td></td>              
            </tr>
          </tbody>
        </table>

Weather.Service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class WeatherService {

  apiKey = '9402da6bd74c395f71604c624cc2b231';
  url;

  constructor(private http:HttpClient) { 
    this.url='http://api.openweathermap.org/data/2.5/group?id=';  //API GET URL

  }

  getWeather(cityCode){
    return this.http.get(this.url+cityCode+'&units=metric&appid='+this.apiKey);
  }

}

Home.component.ts：

import { Component, OnInit } from '@angular/core';
import { WeatherService } from "../shared/weather.service";

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

  location={    
    code: '1248991'
  };

  public weather: any;

  constructor(private weatherService:WeatherService) {

   }

  ngOnInit() {
    this.weatherService.getWeather(this.location.code).subscribe((Response)=>{
      console.log(Response);
      this.weather = Response;
    })
  }

}

这是我在控制台中遇到的错误

错误TypeError：无法读取Object.eval上未定义的属性“列表” [作为updateRenderer]（HomeComponent.html：30）

Answer 1

从服务器加载数据需要花费时间，因此有一会儿，您的天气是不确定的，并且undefined.list会引发错误。 因此，您有两种选择：在HTML weather?.list.name使用Elvis运算符weather?.list.name它可以让您安全地访问天气，或使用<table *ngIf="weather" class="table table-hover">检查您是否有天气牵强。 另外，请确保存在.name属性，并且不必使用*ngFor进行迭代

Answer 2

我记得，openweathermap api返回列表和结果作为数组，而不是对象。 您需要从响应访问列表属性。

这是一个示例响应，

{“ coord”：{“ lon”：-0.13，“ lat”：51.51}，“ weather”：[{“ id”：300，“ main”：“毛毛雨”，“ description”：“光强度毛毛雨”， “图标”： “09D”}]， “基”： “站”， “主”：{ “温度”：280.32， “压力”：1012， “湿度”：81， “temp_min”：279.15， “temp_max” ：281.15}， “可见性”：10000， “风”：{ “速度”：4.1， “DEG”：80}， “云”：{ “所有”：90}， “DT”：1485789600， “SYS”： { “类型”：1， “ID”：5091， “消息”：0.0103， “国家”： “GB”， “日出”：1485762037， “日落”：1485794875}， “ID”：2643743， “姓名”： “伦敦”， “鳕鱼”：200}

还使用安全的导航运算符? 处理列表中是否有空结果。

STACKBLITZ演示

Answer 3

当我遇到这个问题时，我会这样做：{{天气| html中的json}}，然后查看树。