處理在角度應用程序中的API調用中發送兩個參數

Question

我有一系列的過濾器函數，允許用戶單擊一系列過濾器以過濾數據在網格視圖中顯示。當我使用每個過濾器的單獨函數構建過濾器時，我使用observables工作。我們正在使用一種內置到貓鼬中的查詢，它允許您在post調用的主體中通過字段傳遞特定的查詢。我使用這樣的：

onFilterReceived(language) { 
     if (language) { 
      this.filtersService.getByFilter(this.page, this.pagesize, { 
       "services.workflow.status" : "consulting", 
       "languages.primary" : { $in: language }, 
       }) 
       .subscribe(resRecordsData => { 
        this.records = resRecordsData; 
        console.log('onFilterReceived: ' + language); 
       }, 
       responseRecordsError => this.errorMsg = responseRecordsError); 
     } else { 
      this.filtersService.getByFilter(this.page, this.pagesize, { 
       "services.workflow.status" : "consulting" 
      }) 
       .subscribe(resRecordsData => { 
        this.records = resRecordsData; 
       }, 
       responseRecordsError => this.errorMsg = responseRecordsError); 
    } 

我的服務功能，在這裏被稱爲，看起來像這樣：

getByFilter(page, pagesize, body) { 
    const headers = new Headers({ 'Content-Type': 'application/json' }); 
    const options = new RequestOptions({ headers: this.headers }); 
    return this.http.post 
    (`https://api.someurl.com/${this.ver}/customers/search?apikey=${this.key}&page=${page}&pagesize=${pagesize}`, 
    body, options).map((res: Response) => res.json()) 
    .catch(this.filterErrorHandler); 
} 
    filterErrorHandler(error: Response) { 
    console.error(error); 
    return Observable.throw(error.json().error || 'Server error'); 
} 

此工程爲是。

但是，我希望能夠做的是處理傳遞多個鍵/值對，而不僅僅是一個。

您還會注意到，如果語言存在 - 也就是說，如果語言輸入已通過過濾器點擊發送，我將檢查以僅運行請求。這是必要的，否則在查詢api時函數會出錯，因爲沒有值。

要同時處理兩個過濾器，我試着這樣做：

onFilterReceived(language, nationality) { 
    // Receive filter selections for language 
    if (language) { 
     this.filtersService.getByFilter(this.page, this.pagesize, { 
      "services.workflow.status" : "consulting", 
      "languages.primary" : { $in: language }, 
      }) 
      .subscribe(resRecordsData => { 
       this.records = resRecordsData; 
       console.log('onFilterReceived: ' + language); 
      }, 
      responseRecordsError => this.errorMsg = responseRecordsError); 
    } 

    // Receive filter selections for nationality 
    if (nationality) { 
     this.filtersService.getByFilter(this.page, this.pagesize, { 
      "services.workflow.status" : "consulting", 
      "services.service" : { $in: nationality }, 
      }) 
      .subscribe(resRecordsData => { 
       this.records = resRecordsData; 
       console.log('onFilterReceived: ' + nationality); 
      }, 
      responseRecordsError => this.errorMsg = responseRecordsError); 
    }  
} 

但這並沒有工作。雖然我傳遞兩個字段/值以上：

 "languages.primary" : { $in: language }, 

而在另外一個：

 "services.service" : { $in: nationality }, 

...功能不能正常工作。

爲了澄清，如果單擊「語言」過濾器，我想發送請求的「語言」。但是，如果點擊「國籍」過濾器，我想發送「國籍」請求。

但我也不想失去一個參數來換取另一個參數。換句話說，如果在「語言」過濾器上點擊「西班牙語」，我希望它「粘住」。然後，當從「國籍」過濾器中點擊「美國」時，我希望請求能夠通過這兩個參數進行過濾，而不是爲了交換而丟失一個參數。我怎麼能重新工作這個功能來處理這個？

順便說一下，事件/值通過Output（）和EventEmitter（）從另一個組件接收。視圖看起來是這樣的：

 <list [records]="records" 
      (sendLanguage)="onFilterReceived($event)" 
      (sendNationality)="onFilterReceived($event)"> 
     </list> 

而對於我的過濾器的HTML看起來像這樣：

 <filter-option name="Language" 
         placeholder="Select Language" 
         [usePlaceholder]="!languageFilters.text" 
         [visible]="languageFilters.enabled"> 
      <filter-label>{{languageFilters.text}}</filter-label> 
      <filter-menu> 
       <div class="visit-type-filter-options"> 
        <md-checkbox *ngFor="let option of languageFilters.options" [(ngModel)]="option.value"> 
         {{option.language}} 
        </md-checkbox> 
       </div> 
      </filter-menu> 
     </filter-option> 

     <!--NATIONALITY--> 
     <filter-option name="Nationality" 
         placeholder="Select Nationality" 
         [usePlaceholder]="!nationalityFilters.text" 
         [visible]="nationalityFilters.enabled"> 
      <filter-label>{{nationalityFilters.text}}</filter-label> 
      <filter-menu> 
       <div class="visit-type-filter-options"> 
        <md-checkbox *ngFor="let option of nationalityFilters.options" [(ngModel)]="option.value"> 
         {{option.nationality}} 
        </md-checkbox> 
       </div> 
      </filter-menu> 
     </filter-option> 

Answer 1

爲了使代碼整潔。這將處理多個參數。

onFilterReceived(para: any, type: string) { 
    let body:any = {}; 
    body['services.workflow.status'] = 'consulting'; 
    if (type == 'lan') 
     body['languages.primary'] = { $in: para }; 
    if (type == 'nat') 
     body['services.service'] = { $in: para }; 

    this.filtersService.getByFilter(this.page, this.pagesize, body) 
     .subscribe(resRecordsData => { 
         this.records = resRecordsData; 
        }, 
        responseRecordsError => this.errorMsg = responseRecordsError 
     ); 
} 

模板：

<list [records]="records" 
    (sendLanguage)="onFilterReceived($event, 'lan')" 
    (sendNationality)="onFilterReceived($event, 'nat')"> 
</list>