URL参数中的数组(Angular)

Question

我有一个带复选框的过滤器，在选中后向url添加了参数，就像这样

https://localhost:8080/api/records?page=0&locationIds=1,2

但想成为这样的人

https://localhost:8080/api/records?page=0&locationIds=1&locationIds=2

根据我的理解，这是因为我向URL参数传递了一个数组，我的主要想法是重写这段话 forEach 不是为了'key'，但对于'。httpParams[key]'的文件中 candidate.service.ts(不确定)但不知道怎么做才好，这是我的代码。

filter.service.ts. (在这个服务中，过滤器以数组形式返回)

filterByValues(filterType: string, value): FilterParams {
  if (!this.filterParams[filterType]) {
    this.filterParams[filterType] = [value];
  } else if (this.isValueInParams(this.filterParams[filterType], value)) {
    this.filterParams[filterType] = this.removeValueFromParams(this.filterParams[filterType], value);
  } else {
    this.filterParams[filterType].push(value); //return  [1, 2]
  }
  return this.filterParams;
}

isValueInParams(params, value) {
  return params.some(item => value === item);
}

我在其他文件中使用了这个服务，当我选中一些复选框时，这个ID被添加到Array中。

candidate-filter.ts

filterByLocation(location: Location) {
  const filtersToEmit = this.filterService.filterByValues(CandidateFilter.LOCATION, location.id);
  this.candidatesHttpParams.emit(filtersToEmit);
}

这里是我添加网址的地方。

candidate.service.ts

get(page: number, httpParams: FilterParams): Observable<Candidate[]> {
  let params = new HttpParams().set('page', page.toString());

  //My main thought is to rewrite this forEach not for 'key', but for 'httpParams[key]'. Not sure

  Object.keys(httpParams).forEach(key =>
  params = params.append(key, httpParams[key])); //key = locationIds, httpParams[key] = [1,2]
  return this.http.get<Candidate[]>(this.url, { params });
}

而在这里，实际上得到的是候选者

import-page.ts

 private getCandidates(page: number) {
this.candidateViewService.get(page, this.params) 

//this.params = {key: Array(2)} // [1, 2] 

  .subscribe(
    (candidates: CandidateView[]) => this.candidates = candidates,
    error => this.logger.error(error.message));
    console.log('this Params',this.params)
}

希望我的问题是清楚的。如果有任何帮助，我将感激不尽

Answer 1

你可以这样做。

如果你想从一个数组中为一个给定的键传递多个值（比如说 locationId)，你需要重复 params.append(key, v)，对于每个值 v 您的数组 ([1,2])

get(page: number, filterParams: any): Observable<Candidates[]> {
    let params = new HttpParams().set('page', page.toString());

    Object.keys(filterParams).forEach(key=>
    {
      let val: any = filterParams[key];

      if(Array.isArray(val)) //For arrays, repeatedly add values
      {
          for(let v of val)
          {
            params = params.append(key, v);
          }
      }
      else
      {
        params = params.append(key, val); //add value as is
      }

   });
 return this.http.get<any[]>(this.url, { params  });
}

Stackblitz演示 (查看网络标签以查看请求)

Answer 2

检查这个JS的粗略例子，我希望它能引导你找到你需要的东西。

var page = 0;
var locationIds = [1, 2];
function getCall(baseUrl, page, locationIds) {

  let str = baseUrl + "?page" + page + "&"; // adding the first page params.
  locationIds.forEach((element, index) => {
    str += "locationsIds="+element;
    if (index < locationIds.length - 1) { //check if it's the last item or not
      str += "&";
    }
  });
  // do your http call (this.http refers to HttpClient)
    // this.http.get(str).subscribe((data) => {
  //   your code.
  // })
  return str; // only for the example purpose to log the str created;
};
console.log(getCall("http://localhost:8080/records", page, locationIds));

如果你在浏览器中查看开发控制台，在你的angular应用中取消修改http get调用后，你会在网络标签中看到你的请求。

我相信这不是用angular实现这个功能的唯一方法。但这是我脑海中出现的第一个方法。欢迎提出一些问题，以便在你的应用中进行整合。