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

Posted 2023-03-10

【中文标题】在 Angular 应用程序的 API 调用中处理发送两个参数

【英文标题】：Handling Sending Two Parameters in an API Call in Angular App

【发布时间】：2017-10-01 19:55:15

【问题描述】：

我有一系列过滤器功能，允许用户单击一系列过滤器以过滤显示在网格视图中的数据。当我为每个过滤器使用单独的函数构建过滤器时，我让过滤器使用 observables 工作。我们正在使用一种内置在 mongoose 中的查询，它允许您在 post call 正文中按字段传递特定查询。我是这样使用它的：

    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>

【参考方案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>

【讨论】：

我会试试这个。谢谢。

澄清一下，值必须与字段匹配。所以“国籍”会走上不同的路线，是针对“services.service”字段，而不是针对“languages.primary”。这些就像键/值对： "languages.primary" : $in: language ,

我喜欢你在回答的后半部分建议如何处理这个问题的简洁性。但是字符串化似乎没有必要，当我尝试时它也不起作用。

可以在服务端调试吗？检查 paras 是否正确发送？如果没有，浏览器控制台是否有错误？

使用字符串时，当我单击过滤器时，数据不再响应（而没有字符串时），并且在控制台中我得到“NaN”：onFilterReceived: Spanish NaN跨度>