当对象数组发生变化时，Angular 2 ngFor不会更新

我正在使用http获取请求获取json对象数组。目前，我有一个list-view.component在我的event.service组件中调用一个函数getEvents（）。该函数返回Promise，它代表对象数组。它成功地将更新后的数组返回给list-view.component，但由于某种原因，当我尝试在控制台上打印数组时，它不显示更改。当对象数组发生变化时，Angular 2 ngFor不会更新

列表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); 
    }

如果我尝试打印数组中。于是方法，如下面，它正确打印它。

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

怎么来的，当我尝试this.eventService.getEvents后打印（）调用，它没有新的变化？

来源

2016-11-21 Mahmoud Tohmaz

我会说那是因为console.log语句在承诺返回之前执行。它与.then一起使用，因为它在执行时承诺返回。

希望这会有所帮助。

来源

2016-11-21 15:22:55 David

Promise.then()是一个异步方法，这意味着返回的值不能在其外使用。您的承诺所返还的events所需的所有内容都应放在.then()之内。

如果因为您的方法正在调用.then()，它会，但Promise尚未解决，并且该值尚未设置。

然后您的方法将继续并打印您的console.log()。一段时间（毫秒/纳秒）后，异步操作完成。

你可以看到它是这样的：

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

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

这是您创建基本上是什么。您的方法将调用setTimeout()，并立即继续使用console.log而不用等待超时完成。

要打印

异步操作结束

之前，您应该在setTimeout()内包括它（在你的情况你then()）

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

}

来源

2016-11-21 15:30:51 Ivaro18

当对象数组发生变化时，Angular 2 ngFor不会更新

回答

相关问题