Angular: невозможно получить доступ к данным внутри компонента

Question

Я создаю виджет, который использует API погоды, а затем представляет изображение на основе данных в указанном API.У меня проблемы с доступом к данным в компоненте.Я не могу понять, где я иду не так.

Поток здесь: На init я подписываюсь на данные.Затем я (пытаюсь) присвоить это другому массиву (eval).Затем я вызываю метод оценки и выполняю бизнес-логику.

Проблема: я знаю, что я неправильно обращаюсь к eval [0], но если я переместлю его в список [0], он не скомпилируется.Фид данных включает массив списков, в котором есть временное поле.

Спасибо!

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

}

Вот пример JSON из API:

{"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;
  }
}

Answer 1

В коде есть несколько проблем, связанных с асинхронной выборкой данных:

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

Answer 2

Вы можете проверить образец.мы можем получить доступ к this.eval в полной функции обратного вызова.Мы должны использовать неблокирующий стиль для такого рода вещей, код не будет блокироваться и ждать.Мы не смогли получить доступ к this.eval, как в стиле синхронизации.

myObservable.subscribe(
  x => console.log('Observer got a next value: ' + x),
  err => console.error('Observer got an error: ' + err),
  **() => console.log('Observer got a complete notification')**
);