Question

我是Angular 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

我建议使用Observable运算符将Promise转换为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);
}

请参阅官方教程this。

Answer 3

这是你的问题：

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

当您调用res.json()时，它会返回JSON对象，但您实际上并未将其转发到流中的下一步（do()）。将该行更改为

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

现在您将返回JSON对象，该对象将作为do()的输入提供，并将在Subscription

中发出

Angular 2 http得到可观察性

3 个答案: