Question

我的Angular应用程序中有一系列复选框过滤器，当用户在视图中单击时，应触发查询API以返回过滤结果的功能。我一次使用这些过滤器时会有效。但是，我很难弄清楚如何构造函数，以便它可以保存所有当前选定的过滤器。函数调用使用Mongoose / MongoDB功能，该功能允许我们将对应于字段的键/值对直接传递到后请求的有效负载中。

这是我最初的工作（但是只能通过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（）获得“value”和相应的“type”，如下所示：

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

同样，上述所有工作都是。

然而，我正在尝试做的是构建此函数是这样一种方式，当收到的值是“lan”类型时，在这种情况下相应的“值”应用于“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
        );
}

构建一个API调用，在Angular App中保存多个过滤器选择的值

1 个答案: