0

現象:AngularJs 2:如何調試服務調用? (es6語法)

我剛剛學習Angular2。我想調試一個服務的調用。

該服務已被正確調用,正如我在視圖中所見。

我也想登錄到保存結果的變量的內容,但它不工作,因爲我會除外。

該服務:

export class ListService 
{ 
    getList() 
    { 
     return Promise.resolve(LIST); 
    } 
} 

呼叫(從列表組件):

export class ListComponent implements OnInit 
{ 
    list: Item[]; 

    constructor(
     private _router: Router, 
     private _listService: ListService 
    ) { } 


    getList() 
    { 
     this._listService.getList().then(list => this.list = list); 
    } 

    ngOnInit() 
    { 
     this.getList(); 
    } 

} 

LOG ATTEMPT 1:

list是包含可變項目列表。在視圖中正確顯示內容。所以我希望能夠記錄下來,看看它的內容。

getList() 
{ 
    this._listService.getList().then(list => this.list = list); 
    console.log(list) 
} 

但是,當我得到這個錯誤,而不是:

EXCEPTION: ReferenceError: list is not defined in [null] 

LOG未遂2:

試圖獲得正確的語法:

getList() 
{ 
    this._listService.getList().then(list => this.list = list); 
    console.log(this.list) 
} 

有沒有錯誤現在。但在控制檯中顯示undefined。 但服務已被調用。所以,它應該包含內容

問題:

考慮到我使用Angular2 - 的EcmaScript 2016

什麼是正確的語法登錄服務的電話嗎?

謝謝!

+2

的可能的複製[如何我是否返回來自異步調用的響應?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Hacketo

+0

那麼這是更具體關於Angular2語法 – johnnyfittizio

+0

主要問題是相同的,這不是特定於任何語法,它是關於異步任務如何工作,以及如何使用它在JavaScript中工作(順便說一句,這不是Angular2語法,而是Ecmascript 6新的Javascript s標準) – Hacketo

回答

2

實際上this.list設置在then方法中註冊的回調中。所以,你應該使用這樣的事情:如果你把console.log(this.list);權的承諾

getList() 
{ 
    this._listService.getList().then(list => { 
    this.list = list; 
    console.log(list); 
    console.log(this.list); 
    }); 
} 

,結果會不會可能有這麼this.list可能不會設置...