how to instantiate the imported class in angular

Question

i am working on a angualr weather app. for which i have created weather class

 export class Weather{
          city: string;
          condition: string;
          icon: string;
          temp: number;
        }

and i make a http api request for weather details.

i have imported this Weather class and want to assign the fields as per the json object from the api call.

like this.

weather:Weather;
getWeather():void{
               this.weatherserv.getWeather().subscribe(data=>{
                   this.weather.city=data.location.name;
                  this.weather.condition=data.condition.text;
                   this.weather.condition=data.condition.icon;
                   this.weather.temp=data.current.temp_c;
               })
             }

Error i am getting is:

Error: Cannot set property 'city' of undefined

Answer 1

you should try:

weather= new Weather();

or in your case, it's better to use interfaces:

 export interface Weather{
          city?: string;
          condition?: string;
          icon?: string;
          temp?: number;
        }
weather:Weather = {};

here i explained why it's better to use interfaces in your case.

Answer 2

try this:

weather: Weather =  new Weather();
getWeather():void{
           this.weatherserv.getWeather().subscribe(data=>{
               this.weather.city=data.location.name;
              this.weather.condition=data.condition.text;
               this.weather.condition=data.condition.icon;
               this.weather.temp=data.current.temp_c;
           })
         }

Answer 3

您应该从您的类中创建一个新对象，然后为其设置值。

Answer 4

Test follow code:

weather: Weather = new Weather;

Here: the stackblitz for it