1. 程式人生 > >Angular的get傳遞多引數問題

Angular的get傳遞多引數問題

樓主在自學Angular5的時候發現,新版的Angular已經丟棄http的形式改用Httpclient。但是在demo中傳送http.get請求並傳遞多引數的時候發現,引數params如果是HttpParams型別的話,只能傳遞單引數,傳遞多引數要麼被覆蓋要麼無法傳遞(不清楚是我自己程式碼問題還是啥),後面檢視client.ds.ts中對params的宣告,發現params除了可以傳遞HttpParams外,還可以直接傳遞JSON或者string型別。所以,樓主就自己簡單了寫了一個實現JSON傳輸的方法,可支援單復引數。

export class ProductSearchParames {
  constructor(
    public title: string,
    public price: number,
    public category: string
  ) {
  }
}
  public encodeParams(params: ProductSearchParames) {
    return Object.keys(params)
      .filter(key => params[key])
      .reduce((json: any, key: string) => {
        json[key] = params[key];
        return json;
      }, []);
  }

  search(params: ProductSearchParames): Observable<any> {
    return this.http.get('/api/products', {params: this.encodeParams(params)});
  }
在本地測試,可以正常傳輸引數,並且後臺亦可正常接收

相關推薦

Angular的get傳遞引數問題

樓主在自學Angular5的時候發現,新版的Angular已經丟棄http的形式改用Httpclient。但是在demo中傳送http.get請求並傳遞多引數的時候發現,引數params如果是HttpParams型別的話,只能傳遞單引數,傳遞多引數要麼被覆蓋要麼無法傳遞(不清

mybitis 利用association或collection傳遞引數子查詢

有時候我們在查詢資料庫時,需要以查詢結果為查詢條件進行關聯查詢。 在mybatis 中通過 association 標籤(一對一查詢,collection 一對多 查詢) 實現延遲載入子查詢 <resultMap id="xxxMap" typ

vuex actions傳遞引數的處理

場景 . 在使用vue components dispatch Vuex actions的時候需要傳遞引數給多個引數actions 但是在actions 只是可以接收到兩個引數的問題 分析 . vuex actions 固定接受的第一個引數是d

mybatis parameterType 傳遞引數

一、單個引數: public List<XXBean> getXXBeanList(@param("id")String id); <select id="getXXXBeanList" parameterType="java.lang.String" resul

Mybaits 傳遞引數到Mapper

文章目錄 Mybaits 傳遞多個引數到Mapper 1、有哪幾種方式 2、陣列方式 3、Map方式 4、註解方式

80_iOS乾貨43_呼叫OC方法傳遞引數的11種方法

一,方法中寫多個引數呼叫 - (void)test1 { [self testFunctionWithParams1:6 :@"234131#"]; } - (void)testFunctionWithParams1:(int )number :(NSString *)string {

關於Java的小知識-類的載入-引數傳遞-

/** * 測試類的載入順序 */ public class Father { public Father() { System.out.println("This is Father contr"); } { System.ou

Python踩坑之為可變引數的函式,如何動態傳遞引數進去

1、使用*(self.installAppPaths)搞定,一開始我就是想要動態傳遞多個 Tkinter.OptionMenu(self.root, self.box_variable, *(self.installAppPaths),command = self.box_list_clic

Mybatis介面繫結方案及引數傳遞

步驟 在mybatis的配置檔案中改為如下配置 <mappers> <package name="com.lee.mapper"/> </mappers> 建立一個介面 介面包名和介面名與mapper.xml中的n

vue-router 2.0 跳轉之傳參、傳遞引數

在vue專案中,往往會遇到這樣的情況,就是要實現在一文章列表中,點選其中一條跳轉到下個頁面,然後將這一條的相關資料帶到下個頁面中顯示,無論點哪一條都是跳到相同的頁面結構(下一個頁面的頁面使用的元件是一樣的),只是填的資料不一樣,這個時候就需要實現跳轉的時候一起把引數攜帶過去。

微信小程式-傳遞引數與事件處理

開發過程中經常會遇到從一個頁面攜帶資料到另一個頁面的情況,所以需要知道以下資訊,什麼是事件?有哪些傳遞方式?如果傳遞陣列呢?如果傳遞物件呢? 一、事件 什麼是事件 事件是檢視層到邏輯層的通訊方式 事件可以將使用者的行為反饋到邏輯層進行處理 事件可以繫結在元件上,當

mybatis 傳遞引數(xml對映配置二)

方法名中有多個引數 map方式 當多個變數傳入時候,設定入參為map型別,本質上map儲存了入參的鍵值對 優點:幾乎使用所有場景 缺點:業務性質太差,可讀性太差,必須要依賴於接口才能明白入參 &

C++:使用void *傳遞引數

不多說直接上程式碼 函式test只有一個傳入引數void *,但是我們有兩個需要傳入的引數 void test(void *names) { char name[128]; strcpy_s(

mybaits傳遞引數

一、單個引數: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList" parameterType="java.lang.String" resultType="XX

個Activity中傳遞簡單引數

佈局檔案: actiity_main: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="h

傳遞引數的方法(Multiple parameters)

public List<DpCampaignStats> selectByDate(Date start, Date end){     SqlSession session = sqlSessionFactory.openSession();     try {               

AngulaJS路由 ui-router 傳遞引數

定義路由: .state(‘txnresult’, { url: ‘/txnresult/:originAmount/:finalAmount/:currentPoint/:txnId/:discountAmount’,

Angular2入門系列教程6-路由(二)-使用層級路由並在在路由中傳遞複雜引數

  之前介紹了簡單的路由以及傳參,這篇文章我們將要學習複雜一些的路由以及傳遞其他附加引數。一個好的路由系統可以使我們的程式更好的工作。   假設你已經跟上了我們的進度。   我們來為我們的文章明細新增一個評論框;當我們在明細中點選評論的時候,在我們的明細頁面顯示評論,這裡

前端傳遞引數到後臺

前端程式碼: function generateReport() { var params = {}; var temp = $('#transaction_statistics_ma

關於Mybatis的select 查詢時 傳遞引數的4種方式

下面給大家總結了以下幾種多引數傳遞的方法。 方法1:順序傳參法 public User selectUser(String name, int deptId); <select id="selectUser" resultMap="UserResultMap"> sel