javascript - httpParams ลบพารามิเตอร์ที่เป็น undefined

ฉันต้องส่งพารามิเตอร์ใน 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);
  }

ปัญหาคือ เมื่อไม่ได้เลือกตัวกรองบางตัว เพราะฉันไม่ต้องการใช้ และมันถูกตั้งค่าเป็น undefined แต่สิ่งนี้ไม่ถูกต้อง... ฉันต้องการลบพารามิเตอร์ที่เป็น undefined ออก

นี่คือ console.log สำหรับ queryParams

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());
});

ขอบคุณ

คำตอบ #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}) });

มันจะทำความสะอาดตัวแปรที่มีค่าที่เป็น null หรือ undefined

คำตอบ #2

พยายามข้ามพวกมันใน reduce

this.httpClient.get(`${this.url}/list`, { 
  params: queryParameterObject ? queryParameterObject.keys().reduce((queryParams, key) => {
  // getting value from map
  let value: any = queryParameterObject.get(key);

  // extracting value if it's an array
  value = Array.isArray(value) ? value[0] : value;

  // adding only defined values to the params
  if (value !== undefined && value !== null) {
    queryParams[key] = value;
  }

  return queryParams;
}, {}) : {};
});