angular - 基于数组 Angular 2 中 id 数量的动态 URL 参数

Question

我有一个名为 selectedItems 的数组，它由一个多选下拉按钮填充。如果选择了所有选项，SelectedItems 可能看起来像这样:

this.selectedItems: SearchItem[]= [
  {"id":"abee232","itemName":"Attractions"},
  {"id":"b6b1a23","itemName":"Artists"},
  {"id":"08a58c8","itemName":"Performing Arts"},
  {"id":"444d047","itemName":"Sports"}
];

我需要添加 id 值作为 http GET 请求中的参数，无论已选择多少。现在我的逻辑是这样的。

  private addRequestOptions(params: SearchItem[]): RequestOptions {
    let options: RequestOptions = new RequestOptions();
      options.params = new URLSearchParams();
    if (params != null) params.forEach((p: SearchItem) => {
      options.params.append("&collectionId", p.id);
    })
    console.log(options)
    return options;
  }

  sortResults(){
        let options: RequestOptions = this.addRequestOptions(this.selectedItems);
        this.pendingCardsService.collectionUuidUrl = 'http://address/cards/topbrands?perPage=25', options;
        this.pendingCardsBrandCollection();
  }

我的 SearchItem 界面如下所示:

export interface SearchItem {
  id?: string;
  itemName?: string;
}

现在这会创建一个 requestOptions 对象，其中的值作为一个数组，但我的 http 请求不会在网络选项卡的查询字符串参数字段中显示它。 addRequestOptions() 似乎工作正常但未正确应用于获取请求。目标是最终得到这样的 URL:

'http://address/cards/topbrand?perpage=25&collectionId=idValue&collectionId=idValue&collectionId=idValue'

我不知道如何完成这个。任何帮助/提示/建议将不胜感激。

更新最终代码我的问题是我在 'http://address/cards/topbrands?perPage=25' 中进行了硬编码 ?perPage=25 被读取为参数(理所当然)，因此添加了由于参数已经存在，因此未附加 ID。我的最终代码看起来像这样让它正常工作:

  fetchPendingCardsBrandCollection(ids: SearchItem[], pageSize = '25'):Observable<Card[]> {
    const params = new URLSearchParams();
    params.set('perPage', pageSize);
    ids.forEach(id => params.append('collectionId', id.id));
    return this.http.get(this.collectionUuidUrl, {params: params})
      .map(this.extractData)
  }

我的函数调用此 http 请求函数，将 SearchItems 作为参数传递。非常感谢@Praveen M 的帮助和@Jota.Toledo 的解决方案!

Answer 1

import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { Http, URLSearchParams } from '@angular/http';

export interface SomeInterface {
   // Define the properties of the JSON object sent as response from the backend
}

@Injectable()
export class SomeService {
   constructor(private _http: Http){}

   queryElements(ids: string[] = [], pageSize = 25): Observable<SomeInterface>{
      const params = new URLSearchParams();
      params.set('perPage', pageSize); // using set: replace the existing value of the query parameter "perPage" if exist.
      ids.forEach(id => params.append('collectionId', id)); // using append: allows multiple values for the query parameter "collectionId" 
      return 
       this._http.get("http://address/cards/topbrand",{params: params})
         .map(r => r.json())
         .catch(//handle error);
   }
}