Angular2：クエリ文字列を使用してサーバーからhttp取得リクエストでデータを取得する

Question

こんにちは、http取得要求とクエリ文字列を使用してデータを取得しようとしています。

私は http://randomUrl.com/?var1=val1&var2=val2

ように私は、クエリ文字列として 'VAR1 = val1と& var2の= val2の' の代わり を得るための、以下の何とかのようなURLSearchParamsを使用してみました 'クエリ文字列' 'baseUrlに' +ことにGET HTTP URLをしたいです、 私は得ています http://randomUrl.com/?[object%20Object]

以下は私のコードです。私は間違って何をしていますか？グローバルHttpClientServiceで

、サービスにおいて

get(path: string): Observable<any> { 
    const headers = new Headers({ 'Content-Type': 'application/json' }); 
    headers.append('Access-Control-Allow-Headers', 'Content-Type'); 
    headers.append('Access-Control-Allow-Methods', 'GET'); 
    headers.append('Access-Control-Allow-Origin', '*'); 
    headers.append("X-Requested-With", "XMLHttpRequest"); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.get(`${baseURL.baseurl}${path}`, options) 
     .map(this.extractdata) 
     .catch(this.handleError); 
} 

、 @Injectable（） エクスポートクラスGetDataService {サービス上に使用してコンポーネントで

constructor(private http: HttpClient) { } 

    getData(queryparams): Observable<any> { 

    return this.http.get('/front/search?' + `${queryparams}`) 
} 
} 

、

のgetData（ ）：void {

let params = new URLSearchParams(); 
    params.set('var1', 'val1') 
    params.set('var2', 'val2') 
    params.set('var3', 'val3') 

    this.getdata.getData({search:params}) 
     .subscribe 
     (
     data => this.data = data, 
     error => this.errorMessage = error 
     ) 
} 
ngOnInit(): void { 
    this.getData(); 
} 

私はあなたの助けを前もってお待ちしております。

Answer 1

URLSearchParamsが実際のURLに文字列をフォーマットしますが、意味は、それが正しい形式にクエリ文字列を作成しますので、あなたのような何かがしたいです：

var1=val1&var2=val2&var3=val3 

あなたは本当にあなたのURLに渡すよりも何か他のことを行う必要はありません。その後、

getData(): void { 
    let params = new URLSearchParams(); 
    params.set('var1', 'val1') 
    params.set('var2', 'val2') 
    params.set('var3', 'val3') 

this.getdata.getData(params) // just pass the params as such 
    .subscribe(
    data => this.data = data, 
    error => this.errorMessage = error 
    ) 
} 

をし、あなたのサービス：だから、次のことを試してください

get(path: string): Observable<any> { 
    const headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.get(baseUrl, path, options) // notice, pass the baseUrl as string and then just pass the queryparams as such 
     .map(this.extractdata) 
     .catch(this.handleError); 
} 

あなたが[object%20Object]を取得する理由としての理由は、この行は次のとおりです。ここで

this.getdata.getData({search:params}) 

あなたが渡していますオブジェクト - クエリ文字列を保持するプロパティsearchを持つオブジェクトを作成します。これはあなたが望まないものですので、作成したクエリー文字列を渡すだけです。

Answer 2

私が渡すパラメータはオブジェクトの配列だと思います。その場合は。やってみてください。あなたが望むよう

let parameter: URLSearchParams = new URLSearchParams(); 
for(this.i = 0; this.i < param.length; this.i++) { 
    parameter.set(param[this.i]['key'], param[this.i]['value']); 
} 

と

return this.http.get(URL_here, {search: parameter}).map(response => response.json());