Question

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

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

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

HTML

let swiper = new Swipe({
                    onLeft() {
                        console.log('You swiped left.');
                    }
});

组件

<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>

Answer 1

我将对搜索值（来自输入）使用其他属性，以便在过滤时将其保存，因为用于过滤的方法是相同的，因此您需要同时保存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">

stackblitz

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

1 个答案: