javascript - httpParams 删除未定义的参数

Question

我需要在我的 URL 中发送参数以从服务器获取过滤后的数据。

我是这样设置参数的

const queryParams = new HttpParams(
      {
        fromObject: {
          page: this.paginator.pageIndex.toString(),
          pageSize: this.paginator.pageSize.toString(),
          search: this.searchKey,
          sortBy: this.selectedFilterByStatusValue,
          sortByType: this.selectedFilterSortByValue
        }
      });

在我的服务中

 getData(params: HttpParams) {
    return this.apiService.get<IResponseList<IData>>(`${this.url}/list`, params);
  }

问题是，当某些过滤器未被选择时，因为我不需要它们，并且它被设置为未定义，但这是不正确的......我需要删除未定义的参数。

这是queryParams的console.log

cloneFrom: null
encoder: HttpUrlEncodingCodec {}
map: Map(5)
  [[Entries]]
  0: {"page" => Array(1)}
  1: {"pageSize" => Array(1)}
      key: "pageSize"
      value: ["3"]
  2: {"search" => Array(1)}
  3: {"sortBy" => Array(1)}
  4: {"sortByType" => Array(1)}

我尝试使用 .set("page", this.paginator.pageIndex) 和 .append(...) 但我总是得到相同的结构

此外，我尝试直接在服务中修复此问题，但这不起作用，我再次得到 undefined

this.httpClient.get(`${this.url}/list`, { 
  params: Object.entries(queryParameterObject).reduce((queryParams, [key, value]) => queryParams.set(key, value), new HttpParams());
});

感谢

Answer 1

这是我认为可能适合您的单行代码:

const newQueryParameterObject = Object.entries(queryParameterObject).reduce(
    (acc, [key, value]) => ({ ...acc, ...((value != null) & { [key]: value }) }),
    {}
);

this.httpClient.get(`${this.url}/list`, { params: new HttpParams({fromObject:newQueryParameterObject}) });

它将清除具有空值或未定义值的变量。