javascript - 在 Angular 应用程序中构建保存多个筛选器选择的值的 API 调用

Question

我的 Angular 应用程序中有一系列复选框过滤器，当用户在 View 中单击它们时，应该触发查询 API 以返回过滤结果的功能。我每次使用这些过滤器时都会起作用。但是，我很难弄清楚如何构建该函数，以便它可以容纳所有当前选定的过滤器。该函数调用利用 Mongoose/MongoDB 功能，让我们将与字段对应的键/值对直接传递到 post 请求的有效负载中。

这就是我最初拥有的(可以工作，但只能通过 if/else 语句一次处理一个过滤器)。它基本上说，如果“类型”是“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() 发送“值”和相应的“类型”，如下所示:

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

同样，上述所有内容都可以按原样工作。

但是，我想要做的是构建此函数，当收到的值是“lan”类型时，在这种情况下相应的“值”将应用于此处的“值”:

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

然后，当收到的值具有相应类型的“zip”时，该“值”将应用于此处的“值”:

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