Angular 2 http 可观察

Question

我是 Angular 2 的新手，来自 Jquery 背景。我正在为简单的事情而苦苦挣扎。

我的第一个任务是从服务于我 JSON 的 API 填充 HTML Table。

问题是在我尝试创建 html 之前，我正在尝试从 json 填充邮件 class 对象数组，但它一直返回未定义。我已经签入 fiddler 并且 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，其属性可以由接口定义。如果要使用 class，则需要使用 new Mail(.....).

将每个 POJO 映射到 class 的一个实例

Answer 2

我建议使用 toPromise 运算符将 Observable 转换为 Promise，因为 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() 时，它 returns JSON 对象，但实际上您并未将其转发到流中的下一步（do()） .将该行更改为

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

现在您要返回 JSON 对象，它将作为您的 do() 的输入可用，并将在您的 Subscription

中发出

Angular 2 http 可观察

Angular 2 http get observable

angular2-services

angular2-http

angular