Angular：无法访问组件内部的数据

罗伯·汤普森

我正在构建一个插入天气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] 删除。