當對象數組發生變化時，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不會更新

回答

相關問題