CODEWITHSUNDEEP
angularhttptypescriptmodel
joesan
joesan

Reputation: 15355

Class variable declaration and accessing in Angular 4

I have the following model:

export class User {
  email: string;
  token: string;
  username: string;
  bio: string;
  image: string;
  constructor() {}
}

When I tried to instantiate this in another Typescript file, it complains that it cannot as shown in the screenshot below:

IDE screenshot

Any ides as to why I could not instantiate this and set all the properties in this model?

EDIT: After suggestions from the post below, I still could not fix it! Here is the screenshot!

enter image description here

Upvotes: 0

Views: 24144

Answers (2)

BeetleJuice
BeetleJuice

Reputation: 40886

The keyword let should not be used in that context. Use one of the following:

private payload = new User(); // if you don't want this accessible outside the class
public payload = new User(); // if class outsiders should access it directly

You asked:

How do I set the properties in the model after instantiating it?

The right place to do this is for components is the ngOnInit lifecycle hook. This is code that Angular executes once your component is initialized (but before the view is ready)

export class MyComponent implements OnInit {

  private someProperty:int;

  ngOnInit(){
    this.someProperty = 7;
  }
}

If you have a lot of work to do, just call your different initializer functions from within ngOnInit. In your code above, you have a service. Since this isn't a component, it cannot use this lifecycle hook. If you already know the values of the property as you write code (from your second screenshot it seems that you do), you can set it directly:

private payload:User = {
  email: '...',
  token: '...'
}

But chances are you don't know all this stuff and it will be set as the result of a function. The right approach then is to have an initializer function that you call from the components that will consume the service.

@Injectable()
export class UserService {
  private isInitialized:boolean = false;
  private payload:User;

  public init(){
    // init() should only run once
    if(this.isInitialized) return;

    this.payload = new User();
    this.payload.email = '...';
    this.payload.token = this.someFunction();

    // to prevent init() from running again
    this.isInitialized = true;
  }

  private someFunction(){return 'token';}
}

Then in any component, all you need to do is call this.userService.init() before you use it.

Note 1: For a service to have a single global instance, it must be listed in the providers array of your main AppModule and not be provided anywhere else.

Note 2: If initialization involves asynchronous code, such as fetching data from a remote location you will need to be careful to return a promise or an Observable, and for your code to wait until it resolves to try to use the service.

Upvotes: 5

Rajez
Rajez

Reputation: 4067

You are declaring variable with let. try without it. It can be used only to declare function scope variables.i.e inside any function like

constructor() {
    let payload = new User();
}

If you wanted to declare as class variable, It may be like

private payload: User = new User();

After declaration the class variables can be accessed using this keyword at anywhere inside a method in the class, like

this.payload.email = '[email protected]';

Upvotes: 4

Related Questions