CODEWITHSUNDEEP
angular
bobdenard
bobdenard

Reputation: 29

Angular2 property derived of 2 properties

learning Angular2 so please don't be mean

So let's say my UserComponent is exporting a user of type User. It gets it from a UserService at ngOnInit. It has 2 properties called height and weight.

In my template, I want to display {{ user.score }} where score is derived from height and weight. I am using a function that takes height and weight as parameters and returns score.

My question is, where do I declare score? If I do it in the ngOnInit loop it doesn't work.

Thank you for helping a beginner

export class UserComponent implements OnInit {
user = new User;
charId: number;
private sub: any;

constructor(private route: ActivatedRoute, private userService: UserService) {}

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
        this.userId = params['id'];
        this.userService.getUser(this.charId)
            .subscribe(
                (user: User) => {
                    this.user = user
                });
    });
}
}

// and the service

getUser(userId) {
return this.http.get('http://localhost:3000/user' + userId)
    .map((response: Response) => {
        const user = response.json().obj;
        return user;
    })
    .catch((error: Response) => Observable.throw(error.json()));
}

Upvotes: 0

Views: 61

Answers (3)

Suraj Rao
Suraj Rao

Reputation: 29625

export class UserComponent implements OnInit {
user = new User;
charId: number;
private sub: any;


constructor(private route: ActivatedRoute, private userService: UserService) {}

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
        this.userId = params['id'];
        this.userService.getUser(this.charId)
            .subscribe(
                (user: User) => {
                    this.user = user;
this.user.score=calcScore(this.user.height, this.user.weight);//do it here
                });
    });
}
}

// and the service

getUser(userId) {
return this.http.get('http://localhost:3000/user' + userId)
    .map((response: Response) => {
        const user = response.json().obj;
        return user;
    })
    .catch((error: Response) => Observable.throw(error.json()));
}

In your template display as:

{{user?.score}}

since user will be set through async operation,it will come after view is generated. Angular will set it after detecting changes

Upvotes: 0

Simon H
Simon H

Reputation: 21007

You should calculate the score when you have the data you need for that, which is after the subscription returns

export class UserComponent implements OnInit {
score : number;

constructor(private route: ActivatedRoute, private userService: UserService) {}

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
        this.userId = params['id'];
        this.userService.getUser(this.charId)
            .subscribe(
                (user: User) => {
                    this.user = user
                    this.user.score = calcScore(this.user.height, this.user.weight)
                });
    });
  }
}

Upvotes: 1

Avnesh Shakya
Avnesh Shakya

Reputation: 3906

According to your comment above, try something like this:

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
        this.userId = params['id'];
        this.userService.getUser(this.charId)
            .subscribe(
                (user: User) => {
                    this.user = user;
                    this.calcScore(this.user.height, this.user.weight);
                });
    });
}

calcScore(height, weight) {
    this.user.score = YOUR_CALC
}

Hope this will help.

Upvotes: 0

Related Questions