Http参数未在get请求中追加

Question

app.module.ts

getHttpParams = () => {
const httpParams = new HttpParams();
console.log(this.userForm.controls)
Object.keys(this.userForm.controls).forEach(key => {
console.log(this.userForm.get(key).value)
const value = this.userForm.get(key).value;
if (value){
console.log('keyvalue' + httpParams.append(key, value)) ==> It Showing corrrect value
httpParams.append(key, value);      ==> HttpParams map return null
console.log(httpParams)
}
});
return httpParams;
}
onSubmit() {
this.router.queryParams.subscribe(params => {
let opts = { params: this.getHttpParams() }
console.log(opts)
this.http.get<User>(`${this.serverUrl}`, opts).subscribe(
res => {
this.user = res
console.log(res)
}
),
console.log(params);
})
}

当getHttpParams函数调用时，它得到了正确的值，但httpParams.append在httpParams Map中返回null。有人能帮我吗？？

Answer 1

HttpParams append方法将返回带有附加值的新主体。

getHttpParams = () => {
let httpParams = new HttpParams();
Object.keys(this.userForm.controls).forEach(key => {
const value = this.userForm.get(key).value;
if (value){
httpParams = httpParams.append(key, value); // 👈
console.log(httpParams)
}
});
return httpParams;
}

阅读本文在Angular中使用HttpParams创建URL以获取更多信息

Answer 2

您可以简单地从另一个对象创建一个HttpParams对象，请参阅以下内容：

getHttpParams = () => new HttpParams({ fromObject: this.userForm.value });

简洁优雅！