2017-02-26 54 views
2

在Angular 2中,任何人都可以給我看一個從JSON API提取頭文件和數據的基本示例嗎?我可以看到很多關於如何獲取數據的例子,但沒有例子獲取標題。請你能向我展示組件中的代碼,然後是服務中的代碼嗎?Angular 2頭文件和數據

回答

5

那麼,標題應該在響應數據。大多數示例在收到它並訂閱映射流後立即映射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(); 
    } 
} 
+0

看起來你還在使用舊的導入塊,應該是'@ angular/http'吧? – mahatmanich

+0

對。挖出一些舊代碼來顯示那裏的邏輯。修正了,謝謝。 –

+0

感謝這:)我猜你做了這個注射,以便它不必使用服務? –

2

繼承人是爲了設定報頭的代碼!

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獲取標題,你可以參考@Adnan答案!

+0

謝謝你:) –