Angular 5 ServiceがAPIからデータを返していますが、Componentは私にデータを表示していません

Question

observablesを持つtypescriptとrxjsのAngular 5のほとんどは、Angular 2,4とよく似ています。私のコンポーネントコードがデータを表示していない理由を理解する。ここで

私のコードは

モデルです：

export class arsCodes { 
    iD: number; 
    aRSCode: string; 
    aRSDescription: string; 
    class: string; 
    victimFlag: string; 
    startDate: string; 
    endDate: string; 
    createdByUserID: string; 
    createdOnDateTime: string; 
    modifiedByUserID: string; 
    modifiedOnDateTime: string; 
} 

ワーキングサービス

const httpOptions = { 
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }) 
}; 

getArsCodesApi(search: arsCodes) { 
    return this.http.post(this.serviceUrl, JSON.stringify(search), httpOptions) 
    .map((response: Response) => { 
     response; 
     console.log(response) // WORKS 
    }) 
} 

戻っ{ステータス以上にconsole.logで "応答"： "成功"、メッセージ： " "、data：Array（16）}

data: Array(16) 
>0: {ID: 4443, ..... } 
//etc.. 

しかし、それは内のコンポーネントファイルからの私の呼び出しであることがあることを購読未定義

arsCode: ArsCode[]; 

this.arsSevice.getArsCodesApi(this.model).subscribe(
    result => { 
    //this.arsCode = result 
    console.log(result); 
    }, 
    error => { 
    console.log(error); 
    } 
) 

私がデータを取得するために私のコンポーネントで実行する必要がありますか？

Answer 1

問題は、あなたが（のHttpClientを使用して必要はありません）あなたのサービスの.MAP（）関数

には何も返していないことである。しかし、とにかく、あなたはこのように返すことがあります。

return this.http.post(this.serviceUrl, JSON.stringify(search), httpOptions) 
    .map((response: Response) => { 
    console.log(response); 
    return response; 
    }); 

Answer 2

マップ機能が返されます。あなたのhttp請願でこのコードデータを返すために含める：

private extractData(res: Response): Observable<any> { 
    return res|| { }; 
    } 

使用JSONデータ用res.jsonを返す：

return this.http.post(this.serviceUrl, JSON.stringify(search), httpOptions) 
    .map(this.extractData) 
    .catch(this.handleError); 

抽出プレーンデータからの簡単なリターンです。また、エラー制御のためにこれを使用することができます。

private handleError(error: any){ 
    return Observable.throw("Data unavailable or incorrect url"); 
    }