Angular 如何使用数组中的多个条件筛选对象？

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

仅当“statusFilter”（ngModel）不等于0时，此新筛选器才会运行，因为0是默认值，表示忽略发票状态显示所有。我能够成功地单独筛选每个条件，但当尝试在一个筛选函数中添加两个条件时，callbackfn总是返回false

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

HTML

---

我会使用搜索值的附加属性（来自输入）在过滤时保存它，因为过滤使用相同的方法，并且您需要同时保存

statusFilter

和搜索值。还要检查第一个过滤器中字符串的

长度

：

组成部分：

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

全部展示
支付
杰出的
取消
搜索：

---

太棒了，你指出了我错过的东西。我没有注意到val可能被另一个输入覆盖了。这是我的错误

const val=event.target.value.toLowerCase（）我已经检查了实际代码中的长度，不知怎的，我在问题上遗漏了它。非常感谢。
<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">