在 Angular 应用的 API 调用中处理发送两个参数

Question

我有一系列过滤器功能，允许用户单击一系列过滤器以过滤在网格视图中显示的数据。当我为每个过滤器使用单独的函数构建它们时，我让过滤器使用可观察对象工作。我们正在使用一种内置于 mongoose 中的查询，它允许您在 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');
}

按原样工作。

但是，我希望能够处理传递多个 key/value 对，而不仅仅是一个。

您还会注意到我只检查运行请求 if 语言是否存在 - 也就是说，是否通过以下方式发送了语言输入过滤点击。这是必要的，否则函数在查询 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);
     }     
}

但这没有用。当我在上面传递两个 fields/values 时：

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

另一个：

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

...功能无法正常使用。

澄清一下，如果单击 "language" 过滤器，我想在 "language" 上发送请求。但是，如果单击 "nationality" 过滤器，我想在 "nationality" 上发送请求。

但我也不想失去一个参数来换取另一个。换句话说，如果在 "language" 过滤器上单击 "spanish"，我希望它变为 "stick"。然后，当从 "nationality" 过滤器中单击 "American" 时，我希望请求通过这两个参数进行过滤，而不是丢失一个以换取另一个。我怎样才能重新使用这个函数来处理这个问题？

顺便说一句，events/values 正在通过 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>

在 Angular 应用的 API 调用中处理发送两个参数

Handling Sending Two Parameters in an API Call in Angular App

javascript

mongoose

mongodb

angular2-observables

angular