Question

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

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

如果我尝试在.then方法中打印数组，如下所示，则会正确打印。

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

为什么我在this.eventService.getEvents（）调用之后尝试打印它时，它没有新的更改？

Answer 1

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

希望这有帮助。

Answer 2

Promise.then()是一种异步方法，这意味着返回的值不能在其外部使用。您对承诺所返回的events所需要做的一切都应放在.then()内。

如果您的方法正在调用.then()，那么它会，但Promise尚未解决且值尚未设置。< / p>

然后您的方法将继续并打印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);

}

Angular 2 ngFor在对象数组更改时不会更新

2 个答案: