如何使用数组中的多个条件过滤对象？

丹尼尔·库斯塔（Daniel Cuesta）

我正在为Angular组件中的发票表设置几个过滤器。一种是与发票数组中的发票模型的属性名称匹配的搜索输入，另一种是下拉选择元素中的“状态”过滤器。

此新过滤器仅在“ statusFilter”（ngModel）不等于0时运行，因为默认值为0，表示所有忽略发票状态的信息。我能够成功地分别过滤每个条件，但是当尝试在一个过滤器函数中添加两个条件时，callbackfn始终返回false。

现在，只有在搜索输入中输入值之后，我才能从过滤器中获得真实结果。

的HTML

<select [(ngModel)]="statusFilter" (change)="updateFilter($event)">
  <option [value]="0">Show All</option>
  <option [value]="4">Paid</option>
  <option [value]="1">Outstanding</option>
  <option [value]=8>Cancelled</option>
</select>
....
<label>Search:
 <input (keyup)="updateFilter($event)" class="form-control form-control-sm" placeholder="search by name.." type="search">
</label>

零件

export class CompanyInvoicesComponent implements OnInit {
  public isLoading: boolean;
  public limit = 10;
  public temp = [];
  public selected = [];
  public invoice: Invoice;
  public statusFilter: number = 0;
  public rows: Invoice[];

  @ViewChild(DatatableComponent) table: DatatableComponent;


  constructor(
    private _appService: AppService,
    private _invoiceService: InvoiceService,
  ) {

    this._invoiceService.companyInvoices()
      .subscribe( (invoices) => {
        const invoicesArr = [];
        for (const invoice of invoices) {
          invoicesArr.push(new Invoice(invoice, true));
        }

        this.rows = invoicesArr;
        this.temp = [...invoicesArr];
        this._appService.toggleLoading(false);
      });
  }


  updateFilter(event) {
    const val = event.target.value.toLowerCase();
    let temp = this.temp.filter((invoice) => {

      // the type number is lost after value is changed.
      const parsedStatusFilter = parseInt(this.statusFilter.toString(), 10);
      console.log(parsedStatusFilter);
      if (parsedStatusFilter == 0) {
        return (invoice.name.toLowerCase().indexOf(val) !== -1 || !val);
      } else {
        return (parsedStatusFilter == invoice.statusNumber) && (invoice.name.toLowerCase().indexOf(val) !== -1 || !val);
      }
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
    this.table.offset = 0;
  }

瓦迪

我将对搜索值（来自输入）使用其他属性以在过滤时将其保存，因为过滤时使用的是相同的方法，因此您需要同时保存statusFilter和搜索值。还要检查length第一个过滤器中的字符串：

零件：

statusFilter = 0;
searchingWord = '';

updateFilter(event) {
  const val = this.searchingWord.toLowerCase();
  const parsedStatusFilter = parseInt(this.statusFilter.toString(), 10);

  const temp = this.temp.filter((invoice) => {

    if (parsedStatusFilter == 0) {
      return (!val.length || invoice.name.toLowerCase().indexOf(val) !== -1);
    } else {
      return (parsedStatusFilter == invoice.statusNumber) && (!val.length || invoice.name.toLowerCase().indexOf(val) !== -1);
    }
  });
  // filtered temp
  console.log('temp', temp);
}

HTML模板：

<select [(ngModel)]="statusFilter" (change)="updateFilter($event)">
  <option [value]="0">Show All</option>
  <option [value]="4">Paid</option>
  <option [value]="1">Outstanding</option>
  <option [value]=8>Cancelled</option>
</select>
<label for="search-box">Search:</label>
<input input name="search-box" id="search-box" [(ngModel)]='searchingWord' (keyup)="updateFilter($event)" class="form-control form-control-sm" placeholder="search by name.." type="search">

突击

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。