angular - Http-parametrar läggs inte till i GET-förfrågan

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

När getHttpParams-funktionen anropas får den korrekt värde men httpParams.append returnerar null i httpParams-kartan. Kan någon hjälpa mig??

Svar #1

HttpParams append-metoden kommer att returnera en ny kropp med det tillagda värdet.

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

läs den här artikeln Skapa en URL med HttpParams i Angular för mer information

Svar #2

Du kan enkelt skapa ett HttpParams-objekt från ett annat objekt, se nedan:

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

Enkelt och elegant!