Question

在Angular 2中，任何人都可以向我展示一个从JSON api源获取标题和数据的基本示例吗？我可以看到很多关于如何获取数据但没有示例来获取标题的示例。请问您能告诉我组件中的代码，然后是服务中的代码吗？

Answer 1

好吧，标题应该在响应数据中。大多数示例在接收到JSON并订阅映射流后立即映射JSON。您可以使用RxJS do运算符来拦截流并使用原始响应。

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class UserService {
  constructor(http:Http) {
    this.people = http.get('https://jsonplaceholder.typicode.com/users')
    .do((data) => { 
        console.log(data.headers);
        // do your magic here
     })
    .map(res => res.json());
  }
}

如果要对流的每个发射值以不同方式操作数据，最好在可以读取数据之前避免映射。

服务：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class UserService {
  constructor(http:Http) {

  }

  getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/users');
  }
}

组件：

export class UserComponent implements OnInit {

  users: any[];
  constructor(private userService: UserService) { }

  getUsers(): void {
    this.userService.getUsers().subscribe(result => {
      let headers = result.headers;
      this.users = result.json();
      // rest of the magic
    });
  }

  ngOnInit(): void {
    this.getUsers();
  }
}

Answer 2

Heres是设置标题的代码！

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptionsArgs, Headers } from '@angular/http';


@Injectable()
export class AzureService {
headers: Headers;
constructor(private http: Http) {
    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json');
    this.headers.append('ZUMO-API-VERSION', '2.0.0');

  }
getUsers(){
http.get(<URL>,this.headers)
    .do((data) => {
     })
    .map(res => res.json());
}

要从API获取Headers，您可以参考@Adnan A. answer！

Angular 2标头和数据

2 个答案: