我正在构建一个插入天气API的小部件,然后根据所述API中的数据显示图像。我在访问组件中的数据时遇到问题。我不太清楚我要去哪里。
这里的流程:在初始化时,我订阅了数据。然后,我(尝试)将其分配给另一个数组(评估)。然后,我调用评估方法并执行业务逻辑。
问题:我知道我访问eval [0]的方式不正确,但是如果将其移到list [0],它将无法编译。数据Feed包含一个列表数组,其中包含temp字段。
谢谢!
import { WeatherRestService } from './../weatherRest.service';
import { Component, OnInit } from '@angular/core';
import { Weather } from '../models/weather';
@Component({
selector: 'app-widget',
templateUrl: './widget.component.html',
styleUrls: ['./widget.component.css']
})
export class WidgetComponent implements OnInit {
weather: Weather[];
eval: Weather[] = [];
light = 0;
constructor(public rest:WeatherRestService) { }
ngOnInit() {
this.index();
this.evaluate();
}
index() {
this.rest.index().subscribe(
weather => { this.weather = weather; },
err => {
console.error('error retreiving properties');
console.error(err);
}
);
this.eval = this.weather;
}
evaluate() {
if (this.eval[0].list.main.temp < 20) {
this.light = 1;
} else if (this.eval[0].list.main.temp >= 20 && this.eval[0].list.main.temp < 50) {
this.light = 2;
} else if (this.eval[0].list.main.temp >= 50) {
this.light = 3;
}
}
}
这是来自API的JSON示例:
{"cod":"200","message":0.008,"cnt":38,"list":[{"dt":1552024800,"main":{"temp":268.93,"temp_min":266.967,"temp_max":268.93,"pressure":1015.34,"sea_level":1015.34,"grnd_level":751.71,"humidity":72,"temp_kf":1.96},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"clouds":{"all":0},"wind":{"speed":2.26,"deg":242.501},"sys":{"pod":"n"},"dt_txt":"2019-03-08 06:00:00"},{"dt":1552035600,"main":{"temp":267.23,"temp_min":265.757,"temp_max":267.23,"pressure":1015.09,"sea_level":1015.09,"grnd_level":750.66,"humidity":68,"temp_kf":1.47},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"clouds":{"all":0},"wind":{"speed":2.32,"deg":226.502},"sys":{"pod":"n"},"dt_txt":"2019-03-08 09:00:00"},{"dt":1552424400,"main":{"temp":275.391,"temp_min":275.391,"temp_max":275.391,"pressure":1004,"sea_level":1004,"grnd_level":744.59,"humidity":83,"temp_kf":0},"weather":[{"id":600,"main":"Snow","description":"light snow","icon":"13d"}],"clouds":{"all":88},"wind":{"speed":1.58,"deg":82.5016},"rain":{},"snow":{"3h":0.425},"sys":{"pod":"d"},"dt_txt":"2019-03-12 21:00:00"}],"city":{"id":5417598,"name":"Colorado Springs","coord":{"lat":38.8339,"lon":-104.8214},"country":"US"}}
这也是我使用的模型:
export class Weather {
cod: {
city: {
id: number,
name: string
};
list: {
main: {
humidity: number,
temp: number,
}
};
}
constructor(i?: number, n?: string, h?: number, t?: number) {
this.cod.city.id = i;
this.cod.city.name = n;
this.cod.list.main.humidity = h;
this.cod.list.main.temp = t;
}
}
该代码有一些与异步数据获取有关的问题:
this.eval = this.weather;
取决于订阅,因此您需要在内部进行分配 subscribe
evaluate
取决于this.eval
您需要将所有依赖于其this.rest.index
内部的操作放入subscribe
其中:
ngOnInit() {
this.index();
}
index() {
this.rest.index().subscribe(
weather => {
this.weather = weather;
this.eval = this.weather;
this.evaluate();
},
err => {
console.error('error retreiving properties');
console.error(err);
});
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句