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

Question

So, I'm trying to build an app that will take temperature and humidity data and output those values in the app. As of now I can get the data from my mock data in the data.json and output that data in the HTML template.

However, what I would like to do is take values at a given time and output a different value based on those values ie take a Fahrenheit value and calculate Celsius, or calculate the variable pressure deficit(VPD) which outputs a value based on the temperature and humidity.

My hangup is how to get those values in order to plug them into a formula. It outputs using the {{...}} just fine, but I haven't a clue how to add/subtract/divide etc. those values.

Service:

  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);}

Component:

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

Template:

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

Data:

[
{"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

You can do something like this.Inside your component you can declare a function and a new array:

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 });
    }
}

Then you bind the modified array to your html:

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

And you call your function on ngOnInit():

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