typescript 在Angular 14中添加多个查询参数

6tdlim6h  于 2022-12-24  发布在  TypeScript
关注(0)|答案(2)|浏览(140)

我正在为我的应用程序构建一个多项目过滤器,我需要在API中发送多个查询参数来获取过滤的项目。
我的问题是,除了手工添加所有queryParams之外,还有其他方法吗?因为有40-50个选项可供筛选,这可以通过编程方式完成吗?
非常肯定它会工作,如果我手动制作一个对象,但我感兴趣的是,如果有一种方法可以做得更容易。

dhxwm5r4

dhxwm5r41#

是的,可以通过编程方式生成查询参数。
您可以使用Object.entries维护参数键/值数组,将对象转换为键/值对数组,使用Object.fromEntries将键/值对数组转换回对象。

const params = { currency: 'USD', language: 'en-US' }
// convert to [['currency', 'USD], ['language', 'en-US']]
const arrayOfParams = Object.entries(params) 
// convert back to { currency: 'USD', language: 'en-US' }
const paramsObj = Object.fromEntries(arrayOfParams)

然后使用HttpParams序列化/反序列化查询参数的对象:

import { HttpParams } from '@angular/common/http'
const paramsObj = { currency: 'USD', language: 'en-US'}
const params = new HttpParams({ fromObject: paramsObj })

/* Serializes the body to an encoded string, 
*  where key-value pairs (separated by =) are separated by &s. 
*/
const queryStr = params.toString()
pkmbmrz7

pkmbmrz72#

您可以创建一个对象来跟踪所有过滤器选项。
然后简单地使用JSON.stringify将其转换为JSON。
您也可以通过传入replacer function来忽略nullundefined值。

let opt = {
    a: 'string',
    b: 5.1,
    c: true,
    d: { e: 'object' },
    f: ['array'],
    g: null,
    h: undefined,
  };
  
console.log(JSON.stringify(opt, (key, value) => {
    if (value !== null) return value;
}));

相关问题