By default the response body doesn’t contain all the data that might be needed in your app. Your server might return some special header which you have to read explicitly. In such case we can use the { observe: ‘response’} configuration of the Angular HttpClient. Let’s explore how.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpResponse } from '@angular/common/http'; export interface Person {
name: string;
} @Injectable()
export class PeopleService { constructor(private http: HttpClient) {} fetchPeople(): Observable<HttpResponse<Person>> {
return this.http
.get<Person>('data/people.json', { observe: 'response'});
}
}

Now instead of just returning your data, it returns your response object.

 {
"headers": {
"normalizedNames": [],
"lazyUpdate": null
},
"status": 200,
"statusText": "OK",
"url": "https://run.plnkr.co/preview/cjdn2x8fh000ffillqi8d3o4k/data/people.json",
"ok": true,
"type": 4,
"body": [
{
"name": "xxx"
},
{
"name": "xxx"
}
]
}

[Angular] Read Custom HTTP Headers Sent by the Server in Angular的更多相关文章

  1. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  2. ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频

    视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...

  3. net core 2.0 web api + Identity Server 4 + angular 5

    net core 2.0 web api + Identity Server 4 + angular 5前台使用angular 5, 后台是asp.net core 2.0 web api + ide ...

  4. [Angular] Http Custom Headers and RequestOptions

    updatePassenger(passenger: Passenger): Observable<Passenger> { let headers = new Headers({ 'Co ...

  5. [Angular] Create custom validators for formControl and formGroup

    Creating custom validators is easy, just create a class inject AbstractControl. Here is the form we ...

  6. [Angular 2] Custom Validtors

    Create a custom validtor which only accepts the string start with '123'; function skuValidator(contr ...

  7. 使用 Spring RestTemplate 调用 rest 服务时自定义请求头(custom HTTP headers)

    在 Spring 3.0 中可以通过  HttpEntity 对象自定义请求头信息,如: private static final String APPLICATION_PDF = "app ...

  8. [Angular 8] Custom Route Preloading with ngx-quicklink and Angular

    In a previous lesson we learned about implementing a custom preloading strategy. That gives you a lo ...

  9. [Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2

     Just like passing in an array to *ngFor, you can pass in any value into your structural directive s ...

随机推荐

  1. Hibernate单向关联N-N

    单向N-N关联必须使用连接表. Company实体: package com.ydoing.hibernate5; import java.util.HashSet; import java.util ...

  2. UVa 170 - Clock Patience

    题目:Clock Patience游戏,将52张扑克牌,按时钟依次分成13组(中心一组),每组4张全都背面向上, 从中间组最上面一张牌開始.翻过来设为当前值,然后取当前值相应组中最上面的背过去的牌翻过 ...

  3. 数据格式与数据类型(Content-Type)

    常见数据类型: 文本文件: 二进制文件: 编码后的图像文件: jpeg png 网络中爬取的数据: 1. Content-Type Media Types Type text text/css tex ...

  4. c++面向对象程序设计 课后题 答案 谭浩强 第四章

    c++面向对象程序设计课后题答案 谭浩强 第四章 1: #include <iostream> using namespace std; class Complex {public: Co ...

  5. 关于HTML与CSS与class

    在web前端开发中接触的一直是html.css.javascript. 在这个过程中,经常使用的是html中的span.div元素以及css的选择器. 为了方便查找在这里将这些内容的基础知识记录下来. ...

  6. python面向对象与结构成员之间的关系

    1面向对象结构分析:----面向对象整体大致分为两块区域:-------第一部分:静态字段(静态变量)部分-------第二部分:方法部分--每个区块可以分为多个小部分 class A: countr ...

  7. Qt-窗口部件概念介绍

    前言:包括基础窗口部件QWidget.对话框QDialog.QFrame类族 .按钮部件.行编辑器.数值设定框以及滑块部件. 一.基础窗口部件QWidget 窗口部件(Widget)是Qt中建立用户界 ...

  8. json字符串与json对象的相互转换

    什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JSON 独立于语言 * JSO ...

  9. JS应用实例1:表格各行换色

    效果如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  10. spring MVC +freemarker + easyui 实现sql查询和执行小工具总结

    项目中,有时候线下不能方便的连接项目中的数据源时刻,大部分的问题定位和处理都会存在难度,有时候,一个小工具就能实时的查询和执行当前对应的数据源的库.下面,就本人在项目中实际开发使用的小工具,实时的介绍 ...