web-dev-qa-db-ja.com

HttpParamsへの複数のオブジェクト

Formcontrolにいくつかのカテゴリがあります。次のような文字列の配列で送信します。

[1,4,6]

そしてそれが私の実際のコードです：

let categoryIds = new Array<String>()
this.selectedCategories.forEach((value: string, key: string) =>
  categoryIds.Push(key))

let requestOptions = {
    params: new HttpParams()
        .set('title', this.createNewForm.controls['title'].value)
        .append('content', this.createNewForm.controls['content'].value)
        .append('categoryids', categoryIds.toString()),              
    withCredentials: true
}

しかし、古いバージョンのangular Httpを使用して、それらをオブジェクトの配列として送信したいのですが、Httpオブジェクトのforeachを実行してすべてのカテゴリを追加することができました。しかし、方法はわかりませんすべてのカテゴリを取得し、各カテゴリをparamsに追加します。次のようにする必要があります。

... categoryId = 1＆categoryId = 4＆categoryId = 6 ...

angulartypescriptangular-httpclient
6
Juanker

.appendを使用してパラメーターに値を追加し、値の配列を処理するときに探している結果を得ることができます。 .setは、パラメーターの値を設定または置換するために使用されます。したがって、実際には次のようなことを行う必要があります。

let httpParams = new HttpParams()
  .set('title', this.createNewForm.controls['title'].value)
  .set('content', this.createNewForm.controls['content'].value);

categoryIds.forEach(id => {
  httpParams = httpParams.append('categoryId', id);
});

const requestOptions = {
  params: httpParams,
  withCredentials: true
};

明らかではありませんが、.appendメソッドは、呼び出し元のHttpParamsオブジェクトを変更せず、代わりに新しいオブジェクトを返します。上記の例でhttpParamsを再割り当てするのはこのためです。また、.appendは、最初に.setを使用してパラメーターを設定しなくても呼び出すことができます。

16
Rich McCluskey

すべてのパラメータを含むオブジェクトを作成し、fromObjectの作成中にこのオブジェクトをHttpParamOptonsのHttpParamsプロパティに渡すことができます

let data={
   firstname:'xyz',
   lastname:'pqr'
}

let body=new HttpParams({fromObject:data})

this.http.post(URL, body, this.header).subscribe(data => {
 ....
}, error => {
 ....
})
8
Altaf Shaikh

これがあなたが探しているものかもしれません

コンポーネントファイル：

import { Component } from '@angular/core';
import { HttpParams } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

data = [
       {id:'_', title:'_', content:'_'},
       ....,
       ....
       ];

mainArr:any = [];

constructor(){}

getCategory(item){
    this.mainArr.Push({title:item.title,content:item.content,categoryId:item.id});

   console.log('mainArr',this.mainArr);

   let requestOptions = {
        params: new HttpParams()
        .append('data', this.mainArr),
        withCredentials: true
    }

   console.log('requestOptions',requestOptions);
  }
}
1
AddWeb Solution Pvt Ltd