Question

我正在尝试制作一份列出5个城市及其当前天气的天气应用程序。当您点击某个城市时，它会转到详细视图，该视图会显示该城市的5天预测。

现在我有一个weatherItem类：

export class WeatherItem {
  city: string;
  description: string;
  temperature: number;
}

*这是我的weatherService中获取5个城市当前天气信息的方法：

fetchCurrent(){
    return Observable.forkJoin(
      this.http.get('http://api.openweathermap.org/data/2.5/weather?q=Chicago&units=imperial&appid=f630449a4407b742703bf37d8e8c9057').map(
      (response) => response.json()),
     this.http.get('http://api.openweathermap.org/data/2.5/weather?q=Dallas&units=imperial&appid=f630449a4407b742703bf37d8e8c9057').map(
       (response) => response.json()),
     this.http.get('http://api.openweathermap.org/data/2.5/weather?q=Milwaukee&units=imperial&appid=f630449a4407b742703bf37d8e8c9057').map(
       (response) => response.json()),
     this.http.get('http://api.openweathermap.org/data/2.5/weather?q=Seattle&units=imperial&appid=f630449a4407b742703bf37d8e8c9057').map(
       (response) => response.json()),
     this.http.get('http://api.openweathermap.org/data/2.5/weather?q=Washington&units=imperial&appid=f630449a4407b742703bf37d8e8c9057').map(
       (response) => response.json())
  );
  }

这是我在WeatherComponent中调用的方法，它使用来自weatherService的fetchCurrent（）方法

getWeather(): void {
   this.weatherService.fetchCurrent()
   .subscribe(data => this.weatherItems = data);
  }

它成功地从openweathermap.org获取当前的天气数据，但在我的 WeatherComponent我目前正在显示如下数据：

<ul class="weatherItems">
    <li *ngFor="let weatherItem of weatherItems" class="box" (click)="gotoDetail(weatherItem)">
      <div class="col-1">
        <h3>{{weatherItem.name}}</h3>
        <p class="info">{{weatherItem.weather[0].description}}</p>
      </div>
      <div class="col-2">
        <span class="temperature">{{weatherItem.main.temp}}° F</span>
      </div>
    </li>
  </ul>

如何正确获取该JSON数据并将其映射到我的视图？例如，我有

{{weatherItem.city}}

在我使用模拟数据之前，但现在我必须使用JSON数据，除非我使用

否则我无法正确显示城市名称

{{weatherItem.name}}

在角度2中是否有办法绑定＆＃34;名称＆＃34;从JSON到我的weatherItem.city属性的数据？

Answer 1

首先，如果您的WeatherItem只是后端类的模型，它应该看起来像这样（模型类应该具有与json相同的属性名称）：

export class WeatherItem {
  constructor(weather: Weather,
              base: string,
              id: number,
              name: string,
              cod: number) {}
}

export class Weather {
    constructor(id: number,
                main: string,
                description: string,
                icon: string){}
}

第二个，你的weatherItems应该这样声明：

public weatherItems: Array<WeatherItem>; // or just weatherItem: Weather if your json just return single object

当然，您可以使用其余的json属性（main，wind，rain等）创建完整模型，但如果您不需要使用它，则不需要它。

如何将JSON数据绑定到我的类属性

1 个答案: