在 Angular 应用程序中构建一个 API 调用持有多个过滤器选择的值

Question

我的 Angular 应用程序中有一系列复选框过滤器，当用户在视图中单击它们时，应该触发查询 API 到 return 过滤的功能结果。当一次使用一个过滤器时，我可以使用这些过滤器。但是，我很难弄清楚如何构建函数以便它可以容纳所有当前选择的过滤器。函数调用利用了 Mongoose/MongoDB 特性，让我们可以将对应于字段的 key/value 对直接传递到 post 请求的负载中。

这是我最初拥有的（有效，但只能通过 if/else 语句一次处理一个过滤器）。它基本上说，如果 "type" 是 "lan"，则相应地分配值。如果没有提供任何值（即用户已取消选择所有过滤器），则只需发送一个 API 调用请求而不包括任何输入参数（最后一个 "else" 这里）：

    onFilterReceived(value, type) {
        if (type === 'lan' && value) {
            this.filtersService.getByFilter(this.page, this.pagesize, {
                "services.workflow.status" : "consulting",
                "languages.primary" : { $in: value }
                });
        } else if (type === 'zip' && value) {
            this.filtersService.getByFilter(this.page, this.pagesize, {
                "services.workflow.status" : "consulting",
                "zipCode" : { $in: value }
                });
        } else {
            this.filtersService.getByFilter(this.page, this.pagesize, {
                "services.workflow.status" : "consulting"
            });
    }

我正在通过 Angular 的 Output() 和 EventEmitter() 发送 "value" 和相应的 "type"，如下所示：

        <list [records]="records"
            (sendLanguage)="onFilterReceived($event, type = 'lan')"
            (sendZipcode)="onFilterReceived($event, type = 'zip')">
        </list>

同样，以上所有工作 按原样。

然而，我想要做的是构建这个函数，当接收到的值是 "lan" 类型时，在这种情况下应用相应的 "value"至 "value" 此处：

"languages.primary" : { $in: value }

然后当接收到的值具有对应类型 "zip" 时，"value" 将应用到 "value" 此处：

"zipCode" : { $in: value }

最终目标是我将能够通过 API 发送请求，同时保存多个过滤器的值。

我已经尝试了很多配方，但到目前为止还无法让它发挥预期的作用。我一直在使用 'if/else' 语句，就像上面那样，但同样，这只会让我一次保存一个过滤器的值。我如何才能确保我传递了每个当前选定的过滤器值？

如果有人能提供一个基本示例来说明如何制定这种逻辑，那将非常有帮助。

Answer 1

body: any = {'services.workflow.status':'consulting'};

private processType(name: string, para: any) {
    if (this.body[name]) // toggle filter, removing or adding
        delete this.body[name];
    else
        this.body[name] = { $in: para };
}

onFilterReceived(para: any, type: string) {
    if (type == 'lan') {
        this.processType('languages.primary', para);
    }
    if (type == 'zip') {
        this.processType('zipCode', para);
    }
    if (type == 'nat') {
        this.processType('services.service', para);
    }
    console.log(this.body);

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

在 Angular 应用程序中构建一个 API 调用持有多个过滤器选择的值

Building an API Call Holding Multiple Filter-selected Values in Angular App

javascript

angular

typescript

eventemitter