html - HTML/TS 双搜索过滤器

Question

我有一个表，我想同时使用 2 列进行过滤。

<div class="form-row">
   <div class="form-group ml-2">
      <input
        formControlName="serviceUser"
        class="form-control w-230px"
        type='text'
        placeholder='Search by Name...'
        (keyup)='filterByName($event)'
        onClick="this.setSelectionRange(0, this.value.length)"
       />
      </div>

     <div class="form-group ml-2">
       <input
        formControlName="medication"
        class="form-control w-230px"
        type='text'
        placeholder='Search by Medication...'
        (keyup)='filterByMedication($event)'
        onClick="this.setSelectionRange(0, this.value.length)"
        />
     </div>
   </form>
</div>

filterByName(event) {
  const val = event.target.value.toLowerCase();
  this.audits = this.temp.filter(function (d) {
    return d.name.concat().toLowerCase().indexOf(val) !== -1 || !val;
  });
}

filterByMedication(event) {
  const val = event.target.value.toLowerCase();
  this.audits = this.temp.filter(function (d) {
    return d.medication.concat().toLowerCase().indexOf(val) !== -1 || !val;
  });
}

过滤列时，只有第二个过滤器有效，并覆盖第一个过滤器。

标签： htmlangulartypescript