URL参数中的数组(Angular)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了URL参数中的数组(Angular)相关的知识，希望对你有一定的参考价值。
我有一个带复选框的过滤器，在选中后向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)
希望我的问题是清楚的。如果有任何帮助，我将感激不尽
答案
你可以这样做。
如果你想从一个数组中为一个给定的键传递多个值（比如说 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演示 (查看网络标签以查看请求)
另一答案
检查这个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));以上是关于URL参数中的数组(Angular)的主要内容，如果未能解决你的问题，请参考以下文章
如何捕获 URL 参数并基于 url 参数重定向到 angular4 中的其他组件