在Angular 2中,任何人都可以給我看一個從JSON API提取頭文件和數據的基本示例嗎?我可以看到很多關於如何獲取數據的例子,但沒有例子獲取標題。請你能向我展示組件中的代碼,然後是服務中的代碼嗎?Angular 2頭文件和數據
2
A
回答
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();
}
}
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
謝謝你:) –
相關問題
- 1. Angular 2中的多個頭文件
- 2. Gzip文件和Angular 2
- 3. Angular 2數據表
- 4. Angular 2訪問硬件攝像頭
- 5. Angular 2數據綁定和setTimeout
- 6. Angular 2,ngrx/store,RxJS和樹狀數據
- 7. 使用Angular 2和Spring上傳文件
- 8. Codeigniter和Angular數據文章
- 9. Angular 2:ChangeDetection和mousemove事件
- 10. Angular 2數據持久性
- 11. Angular 2 - 表單數據
- 12. Angular 2&Electron離線數據
- 13. HTTP/2的頭和數據幀
- 14. Angular 2/4返回得到響應自定義頭文件
- 15. Angular 2 - 從Http請求獲取頭文件
- 16. Angular 2 - 下載csv文件
- 17. Angular 2定義文件
- 18. Angular 2訪問JSON文件
- 19. Angular 2 - 上傳文件
- 20. HTTP GET請求頭和Angular 2中的參數
- 21. Ionic 2 Angular 2獲取REST JSON數據
- 22. 如何從Angular 2中的數據渲染靜態Angular組件?
- 23. Angular 2 - 發送文件作爲表單數據的一部分
- 24. Angular 2 - 從json文件中獲取數據
- 25. Angular 2和Bootstrap
- 26. bootstrap和angular 2
- 27. Angular 2和RxJS
- 28. Angular 2和jQuery
- 29. NodeJS和Angular 2
- 30. Angular 2和stripe.js
看起來你還在使用舊的導入塊,應該是'@ angular/http'吧? – mahatmanich
對。挖出一些舊代碼來顯示那裏的邏輯。修正了,謝謝。 –
感謝這:)我猜你做了這個注射,以便它不必使用服務? –