Question

所以，我正在尝试构建一个能够获取温度和湿度数据并在应用中输出这些值的应用。截至目前，我可以从data.json中的模拟数据中获取数据，并在HTML模板中输出该数据。

但是，我想要做的是在给定时间取值并根据这些值输出不同的值，即取华氏值并计算摄氏度，或计算输出基于值的可变压力不足（VPD）关于温度和湿度。

我的挂断是如何获取这些值以便将它们插入到公式中。它使用{{...}}输出就好了，但我还不知道如何添加/减去/除去这些值。

服务：

  getData(): Observable<TempRh[]> {
   return this._http.get('./assets/data.json')
  .map((response: Response) => response.json())
  .do(data => console.log("All: " + JSON.stringify(data)))
  .catch(this.handleError);}

组件：

  ngOnInit(): any {
    this._dataService.getData()
    .subscribe(
    tempHum => this.tempHum = tempHum,
  );}

模板：

  <ul>
    <li *ngFor="let tempHum of tempHum">{{tempHum.temperature}} , 
    {{tempHum.humidity}}</li></ul>

数据：

[
{"date": "2012-05-01", "temperature": 70, "humidity": 70},
{"date": "2012-05-02", "temperature": 74, "humidity": 72},
{"date": "2012-05-03", "temperature": 79, "humidity": 65},
...]

Answer 1

您可以执行以下操作。在组件内部，您可以声明一个函数和一个新数组：

modifiedTempHum: Array<any>;

private transformTemp(tempHum) {
  for (let item of tempHum) {
    const temperature = item.temperature;
    const humidity = item.humidity;

    // here you do what you want with your variables

    modifiedTempHum.push({ Temperature: temperature, Humidity: humidity });
    }
}

然后将修改后的数组绑定到html：

<ul>
    <li *ngFor="let tempHum of modifiedTempHum">{{tempHum.Temperature}} , 
    {{tempHum.Humidity}}</li></ul>

你在ngOnInit（）上调用你的函数：

ngOnInit(): any {
    this._dataService.getData()
    .subscribe(
    tempHum => this.transformTemp(tempHum),
  );}

输入从Angular 2中的Observable返回的数据

1 个答案: