Angular 2 ngFor won't update when object array changes

Question

I'm working on getting a json object array using an http get request. Currently, I have a list-view.component that calls a function, getEvents() in my event.service component. That function returns Promise, which represents the object array. It successfully returns the updated array to list-view.component, but for some reason, when I try to print out the array on console, it doesn't show the changes.

list-view.component.ts

this.eventService.getEvents(lat, lon, range, s).then(events => this.eventsList = events);
console.log(this.eventsList);

event.service.ts

getEvents(lat: number, lon: number, radius: number, s: string): Promise<Event[]> {
    return this.http.get(this.eventsUrl + "?s=" + s +"&radius=" + radius + "&lat=" + lat + "&lon=" + lon)
        .toPromise()
        .then(response => response.json() as Event[])
        .catch(this.handleError);
  }

If I try to print the array in the .then method, like below, it prints it correctly.

this.eventService.getEvents(lat, lon, range, s).then(events => console.log(events));

How come, when I try to print it after the this.eventService.getEvents() call, it doesn't have the new changes?

David · Accepted Answer · 2016-11-21 15:22:55Z

1

I'd say thats because the console.logstatement is executed before the promise returns. It works with .then because it`s executed when the promise returns.

Hope this helps.

answered Nov 21, 2016 at 15:22

David

7,5373 gold badges24 silver badges40 bronze badges

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

Comments

Ivafo · Accepted Answer · 2016-11-21 15:30:51Z

Promise.then() is an async method, which means that the value returned can't be used outside of it. Everything you need to do with your events returned by your promise should be put within the .then().

This if for the reason that your method is calling .then(), it will, but the Promise hasn't yet been resolved and the value hasn't yet been set.

Then your method will continue and print your console.log(). Some time (milli/nano-seconds) later, your async operation finished.

You could see it something like this:

fun test() {
   setTimeout(() => {
     console.log('Async operation ended');
    }, 2000);

   console.log('Normal operation ended');
}

which is basically what you created. Your method will call the setTimeout(), and immediately continue with the console.log without waiting for the timeout to finish.

To print the

Async operation ended

Before, you should include it within your setTimeout() (in your case your then())

fun test() {
   setTimeout(() => {
     console.log('Async operation ended');
     console.log('Normal operation ended');
    }, 2000);

}

Collectives™ on Stack Overflow

Angular 2 ngFor won't update when object array changes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related