角度2 httpが観測可能

Question

私は角度2に新しいです、Jqueryの背景から来ています。私は単純なことに苦しんでいます。

私の最初の仕事は、JSONを提供しているAPIからHTMLテーブルを作成することです。

問題は、私もhtmlを作成しようとする前です。私はjsonからメールクラスオブジェクトの配列を取り込もうとしていますが、未定義に戻ってきます。私は入札者をチェックして、jsonが提供されています。

私が作成している：

• がget-mail.service.tsをJSON
• inbboxmail.component.htmlをダウンロードする| TS | CSS私のことを
• mail.ts表示すべきモデル

GET-mail.service.tsは - ここ.MAP機能コンソールログは全体JSONで戻ってきている（私は予想通り）が、.doというコンソールログが定義されていません

import { Injectable, Inject } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs'; 
import { Mail } from "../model/mail" // My Model 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class GetMailService { 

    constructor(private http: Http, @Inject('ORIGIN_URL') private originUrl: string) {} 

    getMail(): Observable<Mail[]> { 
     return this.http.get(this.originUrl + '/api/mail/') 
      // ...and calling .json() on the response to return data 
      .map((res: Response) => { res.json(); console.log("map", res.json()); }) //This is coming back with my entire json 
      .do(data => console.log("all:" + JSON.stringify(data))) //all: undefined 
      //...errors if any 
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
    } 

} 

inboxmail.component.ts //すべてのコンソールログは未定義

import { Component, Inject } from '@angular/core'; 
import { GetMailService } from '../../../services/get-mail.service'; 
import { Observable } from 'rxjs'; 
import { Mail } from '../../../model/mail' 

@Component({ 
    selector: 'inboxmail', 
    templateUrl: './inboxmail.component.html', 
    styleUrls: ['./inboxmail.component.css'], 
    providers: [GetMailService] 

}) 
export class InboxMailComponent { 
    public mail: Mail[]; 

    constructor(private service: GetMailService) { 
     service.getMail() 
      .subscribe(_mail => { console.log("mail", _mail); this.mail = _mail }, 
       null, 
       () => console.log("complete", this.mail)); 
    } 

} 

メールモデルに戻って（例えば、目的のために短縮）

export class Mail { 
    constructor(
     public reference: string, 
     public ocrText: string, 
     public status: string, 
     public create: Date 
    ) { } 
} 

務めJSON

[{"reference":"1897","ocrText":"magna adipiscing euismod euismod elit . ","status":"Stored","created":"2017-07-04T14:09:25.2565869Z"},{"reference":"1897","ocrText":"magna adipiscing euismod euismod elit . ","status":"Stored","created":"2017-07-04T14:09:25.2565869Z"}] 

Answer 1

を来ていますサービス方法を次のように変更します。

getMail(): Observable<Mail[]> { 
    /*return this.http.request('./data/people.json') 
     .map(res => res.json());*/ 
     return this.http.get(this.originUrl + '/api/mail/') 
      // ...and calling .json() on the response to return data 
      .map((res: Response) => { console.log("map", res.json());return res.json(); }) //This is coming back with my entire json 
      .do(data => console.log("all:" + JSON.stringify(data))) //all: undefined 
      //...errors if any 
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
    } 

そして、次のようにインターフェースにデータモデルの定義を変更：

export interface Mail { 
    reference: string; 
    ocrText: string; 
    status: string; 
    create: Date; 
} 

なぜインターフェースを？さて、あなたのサービスはJSON形式の文字列を返しています。この文字列はPOJOにマッピングすることができ、そのプロパティはインターフェイスによって定義できます。クラスを使用する場合は、新しいメール（.....）を使用して、すべての単一のPOJOをそのクラスのインスタンスにマッピングする必要があります。

Answer 2

私はPromiseがObservableより理解しやすくなる可能性があるため、toPromise演算子を使用してPromiseにObservableを変換することをお勧めします。

import 'rxjs/add/operator/toPromise'; 
getHero(id: number): Promise<Hero> { 
    const url = `${this.heroesUrl}/${id}`; 
    return this.http.get(url) 
    .toPromise() 
    .then(response => response.json().data as Hero) 
    .catch(this.handleError); 
} 

公式チュートリアルhereを参照してください。ここで

Answer 3

があなたの問題である：

.map((res: Response) => { res.json(); console.log("map", res.json()); }) 

あなたがres.json()を呼び出すと、それはJSONオブジェクトを返しますが、あなたが実際にあなたのストリーム内の次のステップに（do()を）それを転送しません。今、あなたはあなたのdo()への入力として利用できるようになりますし、あなたのSubscription

に放出されるJSONオブジェクトを、戻ってきている

.map((res: Response) => res.json()) 

にその行を変更