web-dev-qa-db-ja.com

HttpClientのクエリ文字列内に配列を渡す方法は？

これは私のアクターの配列です：

['Elvis', 'Jane', 'Frances']

HttpClientのクエリ文字列内でこの配列を渡す方法は？

私は使用しようとしました：

1）

let params = new HttpParams();
params = Params.append('actors[]', ['Elvis', 'Jane', 'Frances']);
this.http.get(url, { params: Params });

2）

let params = new HttpParams().set('actors[]', ['Elvis', 'Jane', 'Frances']);
this.http.get(url, { params: Params });

3）

let Params = new HttpParams();
Params = Params.append('actors[]', 'Jane');
Params = Params.append('actors[]', 'Elvis');
Params = Params.append('actors[]', 'Frances');
this.http.get(url, { params: Params });

TypeScriptが提供するように、1と2は機能しません。

[ts]タイプ 'string []'の引数は、タイプ 'string'のパラメーターに割り当てることができません。

3は、1つのアイテム「actors []」のみを送信します：「Frances」

angularparameters
10
Dmitry Grinko

最善の方法は、それらをstringとしてパラメーターに追加し、バックエンドでarrayまたはlistに変換し直すことだと思います。

let actorList = ['Elvis', 'Jane', 'Frances']
let params = new HttpParams();
params = params.append('actors', actorList.join(', '));
this.http.get(url, { params: params });
21
Venomy

動作するAngular 6.0.6：

private getParams(query) {
let params: HttpParams = new HttpParams();
for (const key of Object.keys(query)) {
  if (query[key]) {
    if (query[key] instanceof Array) {
      query[key].forEach((item) => {
        params = params.append(`${key.toString()}[]`, item);
      });
    } else {
      params = params.append(key.toString(), query[key]);
    }
  }
}
return params;

}

結果：

/api/message?page=1&per=2&order_by=name&order_direction=asc&base_object%5B%5D=2&base_object%5B%5D=1
4
Иван Миронов

これは私のために働いた。

let params = new HttpParams();

['Elvis', 'Jane', 'Frances'].forEach((actorName:string) =>{
  params = params.append(`actors[]`, actorName);
})

[〜＃〜]または[〜＃〜]

let params = new HttpParams();
let actorsArray:Array<string> = ['Elvis', 'Jane', 'Frances'];

actorsArray.forEach((actorName:string) =>{
  params = params.append(`actors[]`, actorName);
})
3
Ifeanyi Chukwu

HttpParamsの代わりにURLSearchParamsを使用しています。

URLSearchParamsでは、配列を文字列化してParamsの「Key-Value-Store」に設定する必要があります。

import { URLSearchParams } from '@angular/http';


let params: URLSearchParams = new URLSearchParams();
params.set('actors', JSON.stringify(yourArrayHere));

SetメソッドでKey-Valueマッピングを使用しているので、試してみてください。

これがあなたのお役に立てば幸いです。

更新：

let options = new RequestOptions({search: params});

this._http.get(url, options).map(...)

RequestOptionsを使用すると、ヘッダーやその他のリクエストオプションも編集できます。

3
marvstar
const actors = ['Elvis', 'Jane', 'Frances'];
let params = new HttpParams();
for (const actor of actors) {
  params = params.append('actors', actor);
}

this.http.get(url, { params: params });
2
aleksfrance