Angular 5 : View not updating

Question

In my view i'm rendering a list of skills, using an observable and *ngFor

I retrieve the skills with the following code:

getSkills(): void {
    this.skillsDataService.getSkills()
        .subscribe(
            skills => this.skills = skills.sort( this.skillSort )
        );
}

However i've learned that it's better to use named functions and not too much nesting. So i changed the code to this:

getSkills(): void {
    this.skillsDataService.getSkills()
        .subscribe(
            this.processSkills
        );
}

processSkills(skills: Skill[]): void {
    this.skills = skills.sort( this.skillSort );
}

And now the view doesn't update, eventhough this.skills is filled.

Patrick Kelleter · Accepted Answer · 2017-12-08 10:30:21Z

2

Your "this" in processSkills will not be the controller when you call it like that. In order to understand what i mean you should just log out "this" inside of processSkills and take a course on how "this" works in JavaScript. In order to make your code work, try this instead:

.subscribe(
        this.processSkills.bind(this)
    );

answered Dec 8, 2017 at 10:30

Patrick Kelleter

2,7911 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Samantha Adrichem Over a year ago

Omg, i you're right. i should've know.. New to typescript, well know with javascript. Thnx! (will accept your answer once allowed by stackoverflow)

Collectives™ on Stack Overflow

Angular 5 : View not updating

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related