異步函數在onInit生命週期鉤子中調用時無法按預期工作

在我的項目中，我有一個服務，應用程序啓動時應該加載本地數據庫。爲此，使用功能GetData()。我嘗試通過撥打ngOnInit()生命週期掛鉤來使用它。它將結果記錄在控制檯中，但屬性datum看起來沒有改變。異步函數在onInit生命週期鉤子中調用時無法按預期工作

但是，如果我將GetData()方法添加到按鈕，屬性會更改並且數據按照預期顯示在控制檯中。

，我看遍了所有的消息表明，正確的方式來加載數據庫，如果我需要它的時候是使用ngOnInit()鉤，這就是爲什麼我不笏調用GetData()當從DOM的一些事件。

元器件

export class AppComponent implements OnInit { 
    datum; 
    constructor(private searchService: SearchService){ } 
    getData(){ 
    this.searchService.getData().subscribe(
     data => { 
     this.datum = data[0]; 
     console.log(this.datum);}, 
     err => console.log("E", err) 
    ); 
    } 

    ngOnInit(){ 
    this.getData(); 
    } 
    title = 'app'; 
}

HTML

<div style="text-align:center"> 
    <h1> 
    Welcome to {{title}}!! 
    Data: {{datum | json}} 
    </h1> 
    <button (click)="getData()">Click Me</button>

應用加載

按鈕點擊

編輯實施getData()與setTimeout()由AlexKhymenko

getData(){ 
    this.searchService.getData().subscribe(
     data => { 
     setTimeout(() =>{ 
      this.datum = data[0]; 
     }); 
     console.log(this.datum);}, 
     err => console.log("E", err) 
    ); 
    }

來源

2017-09-13 Ivan Bespalov

我會使用getter來處理這種情況：'get Datum（）{return this.datum; };在視圖中：'Data：{{Datum}}'。數據不顯示可能有幾個原因：zone.js不會觸發，或者是其他。你也可以嘗試使用'Zone.run'，但它應該已經被getter修復了。此外，始終初始化一個類屬性，如果理論上需要在視圖中顯示，請不要將其保留爲未定義。 NgZone參考資料：https：//angular.io/api/core/NGZone。或者，直接綁定到dom中的getData，並返回observable，然後添加|異步 – briosheje

我真的不明白。 '吸氣'的目的和吸引力是什麼？它只是一個返回'datum'的函數嗎？什麼時候該被叫？ –

@briosheje可能直接綁定到'getData（）'是解決方案，因爲我使用'datum'只是因爲我沒有完全掌握observables的概念。我該怎麼做？它應該看起來像{{searchService.getData（）？ | async}}？ –

的建議因爲在訂閱功能，你會得到一個觀察的對象（不是數組）。

export class AppComponent implements OnInit { 
    datum; 
    constructor(private searchService: SearchService){ } 
    getData(){ 
this.searchService.getData().subscribe(
    data => { 
    //remove brackets 
    this.datum = data; 
    console.log(this.datum);}, 
    err => console.log("E", err) 
); 
} 

ngOnInit(){ 
    this.getData(); 
} 
title = 'app'; 
}

來源

2017-09-13 05:30:53 Manfice

刪除括號只會改變我分配給「datum '。如果我離開括號，則爲與單個對象相對的一組對象。 –

在HTML嘗試

<h1 *ngIf="datum !== null && datum !== undefined && datum !== ''"> 
Welcome to {{title}}!! 
Data: {{datum | json}} 
</h1>

你的數據變量被綁定雙向數據綁定。當datum不等於null或未定義或空白時顯示該HTML標記。

希望對你有所幫助。

來源

2017-09-13 05:35:36

變化不大。在啓動時只有按鈕被顯示。只有當按鈕被點擊時，其他所有內容纔會出現。 –

你改變了html代碼，仍然無法正常工作？ –

仍然是相同的行爲，除了在應用程序啓動時只有Click Me按鈕顯示爲 –

您需要做的是手動運行更改檢測，例如通過調用setTimeout。我創建了a Plunker。

export class AppComponent implements OnInit { 
    datum; 
    title = 'app'; 

    constructor(private searchService: SearchService){ } 
     } 

ngOnInit(){ 
    this.getData(); 
} 
    getData(){ 
     this.searchService.getData().subscribe(
    data => { 
    setTimeout(() => { 
      this.datum = data[0]; 
    }) 
    console.log(this.datum);}, 
    err => console.log("E", err) 
); 

}

來源

2017-09-13 05:58:57 alexKhymenko

要麼我做錯了什麼，或者這沒有幫助。在實現了你的建議之後，我在控制檯中得到的第一個結果是「未定義」，並且DOM中沒有顯示任何內容。點擊按鈕後，控制檯中的結果logget是正確的，並且信息出現在DOM –

給我5分鐘將創建plunker – alexKhymenko

@IvanBespalov更新。它會在2秒後加載日期。 – alexKhymenko

異步函數在onInit生命週期鉤子中調用時無法按預期工作

回答

相關問題