传递多个查询参数不起作用Angular 7 [重复]

Question

import { Injectable } from '@angular/core';
import {HttpClient, HttpParams} from "@angular/common/http";

export interface Filter {
  countryCode?: string,
  postalCode?: string
}

@Injectable({
  providedIn: 'root'
})
export class CountriesService{

  constructor(private http: HttpClient) { }

  getCountries(filters: Filter) {
    const params = new HttpParams();

    if (filters.countryCode) params.append('countryCode', filters.countryCode);
    if (filters.postalCode) params.append('postalCode', filters.postalCode);

    return this.http.get('/api/countries', {params: params})
  }
}

我有一个从端点获取城市的 Angular 7 http 服务，我想通过 optional 多个查询参数 来过滤服务器端的结果，但它不起作用，但它只适用于一个参数。这些参数被忽略或不传递给请求。

Answer 1

HttpParams 是不可变的，您可以在此处看到

https://angular.io/api/common/http/HttpParams#description

要添加多个参数，您可以这样做

  getCountries(filters: Filter) {
    let params = new HttpParams();

    if (filters.countryCode) {
      params = params.append('countryCode', filters.countryCode);
    }
    if (filters.postalCode) {
      params = params.append('postalCode', filters.postalCode);
    }

    return this.http.get('/api/countries', {params: params})
  }

比这更好的是，您可以使用参数fromObject 来使代码更清晰。看看吧：

  getCountries(filters: Filter) {
    // you need the '|| undefined' if the value could be empty string
    const paramsObj = {
       countryCode: filters.countryCode || undefined,
       postalCode: filters.postalCode || undefined
    };
    const params = new HttpParams({ fromObject: paramsObj });

    return this.http.get('/api/countries', { params })
  }