2016-11-25 263 views
1

我想知道如何獲取Angular 2中的數據並將其放入JavaScript中。我看過英雄的教程,這是我到目前爲止所做的。Angular 2 http獲取使用Asp.net Core MVC

  1. 我在構造函數中

  2. 我創建的服務功能得到物品

    GetArticles(subverse : string) : Observable<Article[]> 
    { 
        console.log("GetArticles URL: " + this._getArticlesUrl + "/?subverse="+subverse); 
    
        return this.http.get(this._getArticlesUrl + "/?subverse="+subverse) 
          .map(this.extractData) 
          .catch(this.handleError); 
    } 
    
    private extractData(res: Response) 
    { 
        let body = res.json(); 
        return body.data || { }; 
    } 
    
    private handleError (error: Response | any) 
    { 
        // In a real world app, we might use a remote logging infrastructure 
        let errMsg: string; 
        if (error instanceof Response) { 
        const body = error.json() || ''; 
        const err = body.error || JSON.stringify(body); 
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
        } else { 
        errMsg = error.message ? error.message : error.toString(); 
        } 
        console.error(errMsg); 
        return Observable.throw(errMsg); 
    } 
    

不過,我不創建以http VAR服務不明白什麼是可觀察的,爲什麼我必須在這裏使用它?

現在,這段代碼實際上是調用我的網址和URL實際上返回文章數據爲JSON

URL響應:

[{"id":1,"userID":"00d85571-e2d3-4817-8698-6aa1b184112b","title":"title","link":"http://google.com","text":"text","subverse":"home","votes":0,"isanon":false}] 

這裏是我的文章類:

export class Article { 
    id : number; 
    isanon : boolean; 
    title: string; 
    link: string; 
    text: string; 
    subverse : string; 
    userID : string; 
    votes: number; 
} 

我問題是,我如何將這個URL響應放入我的javascript文章[]中?我試過

articlesO : Observable<Article[]>; 
    articles : Article[]; 

    this.articlesO = this.service.GetArticles(this.subverseStr); 

    this.articlesO.forEach(a => this.articles = a); 

但我this.articles停留undefined代碼。我該如何讀取URL json並將它變成我的Articles[]

任何幫助表示讚賞。

謝謝。

回答

1

可觀察就像一個承諾,但像它的流版本。你可以找到關於承諾的詳細信息VS這裏觀測:Angular - Promise vs Observable

而對於你的問題,你需要訂閱以可觀察到的,以火了。

像這樣:

this.service.GetArticles(this.subverseStr).subscribe((data)=>{ 
    console.log(data); 
    //do something with the returned data. 
    this.articles = data; 
}); 
+1

@ClaySmith什麼鉻的網絡選項卡中的服務器對您的回報? – echonax

+0

我通過從json代碼中刪除body.data來實現它。服務器在我的原始帖子中返回URL響應。我認爲它正在工作!非常感謝您的快速回復。 :) –

+1

@ClaySmith啊沒問題,很高興你明白了:) – echonax