I am currently working on a weather application using Angular. As a beginner in Angular, I am facing an issue with sending data to the second page to display the weather information of the selected city. Can someone please help me identify where the problem lies? Your assistance is greatly appreciated.
export class ForecastComponent implements OnInit, OnDestroy {
constructor(private service: WeatherService, private router: Router, private route: ActivatedRoute) { }
public items: Array<string> = ["ADANA", "ADIYAMAN", "AFYONKARAHİSAR", "AĞRI", "AMASYA", "ANKARA", "ANTALYA", "ARTVİN"];
public selectedValue: BaseModel;
value: any = {};
weatherClass: Weather;
ngOnInit() {}
ngOnDestroy(): void {
this.route.data.subscribe(
(data: { weatherClass: Weather }) => {
this.weatherClass = data.weatherClass;
}
)
}
public selected(value: any): void {
console.log('Selected value is: ', value);
}
public removed(value: any): void {
console.log('Removed value is: ', value);
}
public typed(value: any): void {
console.log('New search input: ', value);
}
public refreshValue(value: any): void {
this.value = value;
}
sendCityWeather(value: Array<BaseModel>) {
this.service.otherWeather(this.value.text).subscribe(
(data) => {
this.weatherClass = new Weather(data.name, data.main.temp, data.weather[0].description, data.main.temp_min, data.main.temp_max, data.weather[0].icon);
console.log(this.weatherClass);
this.router.navigate(['/weather']);
}
)
}
}export class WeatherComponent implements OnInit, OnDestroy {
weatherClass: Weather;
value: any = {};
constructor(private service: WeatherService, private route: ActivatedRoute, private router: Router) {}
ngOnInit() {
this.service.otherWeather(this.value.text).subscribe(
(data: Weather) => {
this.weatherClass = data;
}
)
}
ngOnDestroy(): void {
}export class WeatherService {
weatherClass: Weather;
constructor(private http:Http) { }
otherWeather(city:string){
return this.http.get(`http://api.openweathermap.org/data/2.5/weather?appid=0f3fb9fa31ad3d41f1bb2bd0841c3f2f&q=${city}&units=imperial&cnt=10`).map((response:Response) => response.json());
}
}