在Angular 4中獲取數據

我從角度4和服務器端渲染開始，目前我正在試圖獲取概念驗證，以獲取我的外部API之一的某些數據。該API返回一個Json對象。在Angular 4中獲取數據

該網站呈現相當不錯，但現在，我包括調用來獲取數據它沒有呈現和我得到的反應似乎並不是我應該得到的。

在app.components.ts我說：現在

private apiUrl= 'https://myapi/Users'; 
    data: any = {}; 

    constructor(private http: Http){ 
    this.getUsers(); 
    this.getData(); 
    } 

    getData(){ 
    let res=this.http.get(this.apiUrl).map((res: Response)=>res.json()); 
    console.log("result:",res) 
    return res; 
    } 

    getUsers(){ 
    this.getData().subscribe(data=>{ 
     this.data=data; 
    }) 
    }

，你可以看到，在GetData方法，我在控制檯打印HTTP調用的結果，但我得到這個：

Observable { 
    _isScalar: false, 
    source: Observable { _isScalar: false, _subscribe: [Function] }, 
    operator: MapOperator { project: [Function], thisArg: undefined } }

爲什麼我沒有去那裏的json對象？這可能是原因？

來源

2017-10-19 Sredny M Casanova

這是正確的。你的'res'實際上是一個'Observable'，而不是數據本身。觀察對象是異步的。要查看真實的數據，請在'subscribe（）'處查看'console.log'。回調函數，或者你可以在你的'map'回調函數中查看它。 – CozyAzure

由於您的getUsers（）內部調用了getData，所以您不必在構造函數中再次調用。

constructor(private http: Http){ 
    this.getUsers(); 
    //remove this line this.getData(); 
}

也放在裏面的console.log的訂閱方法來查看實際的數據，

getUsers(){ 
    this.getData().subscribe(data=>{ 
     this.data=data; 
     console.log(this.data); 
    }) 
    }

編輯正如下面的評論說，不建議已經裝你的方法調用構造函數，讓你的組件實現ngOnit並在裏面添加方法

來源

2017-10-19 17:16:07 Sajeetharan

要添加到此...不建議在構造函數中執行異步操作。相反，使用ngOnInit生命週期鉤子方法。另外，通常建議將數據訪問轉移到其自己的服務中。我在這裏有一個完整的示例：https://github.com/DeborahK/Angular-GettingStarted（在APM-Final文件夾中） – DeborahK

在Angular 4中獲取數據

回答

相關問題