Handling Sending Two Parameters in an API Call in Angular App

问题

I have a series of filter functions that allow a user to click on a series of filters in order to filter data displaying in a grid view. I have the filters working using observables when I build them using an individual function for each filter. We are using a kind of query built into mongoose that lets you pass a specific query by field in the body of a post call. I am using it like this:

    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);
     }

My service function, being called here, looks like this:

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');
}

This works as is.

However, what I want to be able to do is handle passing multiple key/value pairs, not just one.

You'll also notice that I am checking to only run the request if language exists - that is to say, if a language input has been sent via a filter click. This is necessary because otherwise the function errors out when querying the api because there is no value.

To handle two filters at a time, I tried doing this:

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);
     }     
}

But this didn't work. While I am passing in two fields/values in the above:

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

And in the other one:

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

... the function doesn't work properly.

To clarify, if the "language" filter is clicked, I want to send the request on "language". But if the "nationality" filter is clicked, I want to send the request on "nationality".

But I also want to not lose one parameter in exchange for the other. In other words, if "spanish" is clicked on the "language" filter, I want that to "stick". Then when "American" is clicked from the "nationality" filter, I want the request to filter by BOTH of those parameters, not lose one in exchange for the other. How could I re-work this function to handle this?

By the way, events/values are being received from another component via Output() and EventEmitter(). The view looks like this:

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

And the html for my filters looks like this:

       <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>

回答1:

To make the code neat. This will handle multiple parameters.

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
        );
}

In template:

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

来源：https://stackoverflow.com/questions/43769276/handling-sending-two-parameters-in-an-api-call-in-angular-app