Question

我有一张包含一些数据的表格，我试图应用过滤器表单来过滤表格中的结果。

这就是我的尝试：

从服务中获取数据。数据是一个对象数组。
将数据保存为：

org_data - 来自服务器的原始未经编辑的数据

data - 使用表格

在input的（ngModelChange）上应用过滤器。

/** Filters from a select input */
updateCountries(event) {
this.campaignService.campaigns = this.campaignService.org_campaigns
  .filter((campaign) => {
return campaign.country === event;
 });
}

/** Filters from a text input */
    updateField($event, field) {
      this.campaignService.campaigns = this.campaignService.org_campaigns
        .filter((campaign) => {
          return campaign[field].includes($event);
        });
    }

问题：

如果我尝试按国家/地区和字段进行过滤，则字段过滤器将覆盖国家/地区过滤器（将显示所有国家/地区）。

任何人都熟悉高效，清晰（避免多种IF）方式来执行此多重过滤？

Answer 1

您可以使用管道（或几个）。但我会用你的方法回答你：

option: string;
input: string;
field: string;

updateField() {
  this.data = this.org_data.filter(item => item.country === this.option && item[field].includes(this.input));
}

现在，您只需将option绑定到您的选择，将input绑定到文本输入，将field绑定到允许您获取所需字段的任何内容。

您现在可以在两个输入上调用此方法。

编辑没有选项：

updateField() {
  this.data = this.org_data.filter(item => this.option ? item.country === this.option && item[field].includes(this.input) : item[field].includes(this.input));
}

编辑使用功能和2个选项：

updateField() {
  this.data = this.org_data.filter(item => this.checkAllOptions(item));
}

checkAllOptions(item: any) {
    let ret = false;
    ret = item[this.field].includes(this.input);
    ret = !ret && this.option1 && item.country === this.option1;
    ret = !ret && this.option2 && item.country === this.option2;
    // + Any condition you want here. 
    return ret;
}

使用此功能，如果项目与3个条件中的一个匹配，则它将返回true。您可以按照自己的意愿完成所需的所有条件。

Answer 2

您可以这样做：

criteria: any = {
    country: "",
    fieldKey: "",
    fieldValue: ""
};

filterCampaigns() {
    this.campaignService.campaigns = this.campaignService.org_campaigns.filter(campaign => { 
        return (campaign.country === this.criteria.country && campaign[this.criteria.fieldKey].includes(this.criteria.fieldValue));
    }
}

updateCountries(country) {
    this.criteria.country = country;
    this.filterCampaigns();
}

updateField($event, field) {
    this.criteria.fieldkey = field;
    this.criteria.fieldValue = $event;
    this.filterCampaigns();
}

Angular 4：基于输入的多重过滤表

2 个答案: