我有一个函数可以处理允许用户在Angular应用程序中的一系列过滤器中检查和关闭各种选项。当选中一个或多个这些过滤器选项时，我向API发送一个post请求以返回与这些参数匹配的数据。
结论：我希望能够根据所有当前所选过滤器的参数查询API以返回结果，而不仅仅是最近检查过的过滤器 - 这是当前正在发生的过滤器。 / p>
让我先描述 IS 的工作原理。
目前，当选择单个过滤器时，我可以正常工作。因为每个过滤器都返回一个数组，所以我可以在该过滤器中选择多个选项。因此，例如，对于“zipcode”，用户可以选择两个zipcodes，API将返回与这两个zipcodes匹配的结果。
这可以使用Mongoose和MongoDB中的一个功能，它允许我发送一个帖子请求，其值与请求正文中的某些字段匹配。我的服务文件中的API调用如下所示：
queryByFilters(page, pagesize, body) {
const headers = new Headers({ 'Content-Type': 'application/json' });
const options = new RequestOptions({ headers: this.headers });
return this.http.post
(`https://api.oururl.com/${this.ver}/clients/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');
}
在组件中，我正在使用它：
onFiltersChecked(value, type) {
if (type === 'zipcode' && value) {
this.filtersService.queryByFilter(this.page, this.pagesize, {
"addresses.zipCode" : { $in: value },
})
.subscribe(resRecordsData => {
this.records = resRecordsData;
console.log('zip: ' + value + ' type: ' + type);
},
responseRecordsError => this.errorMsg = responseRecordsError);
} else if (type === 'lan' && value) {
this.filtersService.queryByFilter(this.page, this.pagesize, {
"language" : { $in: value }
})
.subscribe(resRecordsData => {
this.records = resRecordsData;
console.log('language: ' + value + ', type: ' + type);
},
responseRecordsError => this.errorMsg = responseRecordsError);
} else {
this.filtersService.queryByFilter(this.page, this.pagesize, {
})
.subscribe(resRecordsData => {
this.records = resRecordsData;
},
responseRecordsError => this.errorMsg = responseRecordsError);
}
}
使用Angular的Output（）和EventEmitter（）将值传递到组件中。我也传递一个“类型”，以便能够将正确的值传递到正确的字段。组件视图如下所示：
<grid-list [records]="records"
(sendZipcode)="onFiltersChecked($event, type = 'zip')"
(sendLanguage)="onFiltersChecked($event, type = 'lan')">
</grid-list>
同样，以上所有 IS 都在工作。我遇到问题的方法是让请求能够一次处理多个过滤器。
现在，例如，如果用户检查“zipcode”过滤器中的邮政编码 - 它会发送该请求。如果他们然后转到“语言”过滤器并选择“西班牙语”，请求将被发送出来，其中的数据被过滤为“语言”，特别是“西班牙语” - 但是请求不再包括“zipcode”的过滤参数，即使它仍然被检查。因此，一次只发送一个过滤器，它是最近选择的过滤器。
这是我为了同时传递所有值而尝试做的事情：
onFilterChecked(value, type) {
if (value && type) {
const lan = [];
const zip = [];
this.filtersService.queryByFilter(this.page, this.pagesize, {
"languages.primary" : { $in: lan },
"addresses.zipCode" : { $in: zip }
}).subscribe(resRecordsData => {
this.records = resRecordsData;
console.log('Type: ' + type + ', value: ' + value);
},
responseRecordsError => this.errorMsg = responseRecordsError);
} else {
this.filtersService.queryByFilter(this.page, this.pagesize, {
});
}
}