Как делиться данными, которые я получаю с подпиской в ​​компоненте, между компонентами - PullRequest
Новая
       25

Как делиться данными, которые я получаю с подпиской в ​​компоненте, между компонентами

0 голосов
/ 29 апреля 2018

В моем компоненте я использую .subscribe 

constructor(private CityWeatherDataService: CityWeatherDataService){}

  daysForecast(city,country){

    this.CityWeatherDataService.daysForecast(city,country)
    .subscribe(data => {
      for (var i = 0; i < data.length; i++) {
        this.humidity.push(data[i].humidity);
      } 
      return data;    
    });

  }

  ngOnInit() {
    this.daysForecast("London","UK");
    console.log(this.humidity);
  }

Мой сервис мне так понравился 

daysForecast(city,country): Observable<WeatherItem[]>{
    const params = new HttpParams()
    .set('city', city)
    .set('country', country)
    .set('key', '7fddb2fc6bae42a396f121c7bd341832');
    return this.http.get('https://api.weatherbit.io/v2.0/forecast/daily', {params})
    .map(data=>{
      let forecastItemList = data["data"];
      return forecastItemList.map(function(forecastItem:any) {        
        return {            
          weatherDescription: forecastItem.weather.description,
          weatherIcon: forecastItem.weather.icon,
          temperature: forecastItem.temp,
          humidity: forecastItem.rh,
          wind: forecastItem.wind_spd,
          cloudiness: forecastItem.clouds,
          pressure: forecastItem.pres
        };
      });
    });
  }

Можно ли использовать данные из .subscribe не только в этой функции, но и использовать для использования в другом компоненте? Теперь, когда я делюсь данными из .subscribe, я могу показать их только с ngFor в дочернем компоненте, но он не работает с этими данными в компоненте, но мне нужно это сделать.

Спасибо!

1 Ответ

0 голосов
/ 29 апреля 2018

@ AndrewGumenniy, наблюдаемые являются асинхронными. Это значит, что пока он не закончен, у вас нет данных. Но вам не нужно заботиться об этом. если ваш дочерний компонент имеет @Input, то при изменении данных дата отображается в дочернем компоненте. Вам нужна только переменная 

@Component({
  selector: 'app-root',
  template: `
    <app-child [data]="data"></app-child>
  `
})
constructor(private CityWeatherDataService: CityWeatherDataService){}
  data:any[]; //<--your variable

  daysForecast(city,country){

    this.CityWeatherDataService.daysForecast(city,country)
    .subscribe(data => {
      this.data=data.map(x=>x.humidity); //<--an abreviate way to do your loop
      //you needn't return anything
    });

  }

  ngOnInit() {
    this.daysForecast("London","UK");
    console.log(this.humidity); //<--this give you "null", but that's not important
  }
...