It is possible to use HttpParams to set http params.

For example we have this url to make:

https://angular-http-guide.firebaseio.com/courses.json?orderBy="$key"&limitToFirst=1

So there are two params:

  1. orderby

  2. limitToFirst

Using HttpParams:

import {HttpParams} from "@angular/common/http";

const params = new HttpParams()
.set('orderBy', '"$key"')
.set('limitToFirst', ""); this.courses$ = this.http
.get("/courses.json", {params})
.do(console.log)
.map(data => _.values(data))

To notice that HttpParams's instance is an immutable object, everytime you call 'set()' method on it, it will create a new object, so you need to use chain method.

Equivalent way:

const params = new HttpParams({
fromString: 'orderBy="$key"&limitToFirst=1'
});

Original Article

[Angular] HttpParams的更多相关文章

  1. [Angular] Send Data via HTTP using Angular HttpParams

    Obviously in a real world application we do not only fetch data from the backend, but we also send d ...

  2. 【响应式编程的思维艺术】 (5)Angular中Rxjs的应用示例

    目录 一. 划重点 二. Angular应用中的Http请求 三. 使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 3.2 常见的操作符 四. 冷热Observable的两种典型场景 4 ...

  3. Angular学习笔记—HttpClient (转载)

    HttpClientModule 应用 导入新的 HTTP Module import {HttpClientModule} from '@angular/common/http'; @NgModul ...

  4. @angular/cli项目构建--路由3

    路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...

  5. angular配置懒加载路由的思路

    前言 本人记性不好,对于别人很容易记住的事情,我愣是记不住,所以还是靠烂笔头来帮我长长记性. 参考文章:https://blog.csdn.net/xif3681/article/details/84 ...

  6. angular cli http请求封装+拦截器配置+ 接口配置文件

    内容:接口配置文件.http请求封装 .拦截器验证登录 1.接口配置文件 app.api.ts import { Component, OnInit } from '@angular/core'; / ...

  7. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  8. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  9. TypeScript: Angular 2 的秘密武器(译)

    本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了 ...

随机推荐

  1. 【VC++学习笔记五】SDI|MDI的全屏显示

    一.Mainframe中添加一个记录是否全屏状态的变量BOOL m_bFullScreen. 二.工具栏添加一个按钮,进行全屏的操作,响应事件函数写在Mainframe中. 三.在响应函数中,添加如下 ...

  2. Maven学习总结(19)——深入理解Maven相关配置

    MAVEN2的配置文件有两个settings.xml和pom.xml settings.xml:保存的是本地所有项目所共享的全局配置信息,默认在maven安装目录的conf目录下,如果没有安装mave ...

  3. Python 查找Twitter中特定话题中最流行的10个转发Tweet

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-4 @author: guaguastd @name: fi ...

  4. android Manifest.xml选项

    结构 继承关系 public final class Manifest extends Object java.lang.Object android.Manifest 内部类 class  Mani ...

  5. C#最简单的登录Web服务

    因为演示程序,所以有下面问题: 1.password是明码传输. 本文在  C#建立最简单的web服务,无需IIS  的基础上完毕. 详细步骤: 一.RequestProcessor添加变量mLogi ...

  6. modSecurity规则学习(二)——配置文件

    crs-setup.cnf #SecDefaultAction指令后的规则都继承这一设置,除非为某条规则指定了一个特定的动作,或者指定了新的SecDefaultAction.特别注意到,未经处理的di ...

  7. idle-实现清屏

    最近在学习python的时候,需要用到ubuntu的python idle.这个工具可以测试python语法.但是呢,在使用的过程中遇到了一个问题.就是随着你的输入,你会发现这个输入会停留在这个界面的 ...

  8. the night the room

    http://bogifabian.com/?page_id=2529 I am trying to creat dreamful atmospheres, paint walls and floor ...

  9. batch---系统不繁忙时执行任务

    batch:不需要指定时间,自动在系统空闲的时候执行指定的任务 [root@xiaolizi ~]# batch at> echo 1234at> <EOT>job 5 at ...

  10. mysql 数据库 存储数据类型

    int 类型的数据  可以在数据库里存成 char字符串类型的数据: 纯数字的字符串 可以在数据库里存储为 int的数据类型.