Javascript 如何在表中选择列以搜索其中的值？

我刚刚在我的带有管道的Angular项目中添加了搜索栏。 目前，搜索栏适用于我的表中的所有元素

我想在下拉列表中选择一列，或者只选择一个复选框，然后搜索该特定列的值。 我怎么做

我的列来自我的服务中的getColumns（）数组

COMPONENT.HTML

<div class="container">
  <ul class="table-wrapper">
    <div class="table-title">
      <div class="row">
        <div class="col-sm-4">
          <div class="show-entries">
            <span>Show</span>
            <label>
              <select [(ngModel)]="pageSize">
                <option *ngFor="let maxPerPage of rowsOnPageSet"
                        (click)="maxElements(maxPerPage)">{{maxPerPage}}</option>
              </select>
            </label>
            <span>users</span>
          </div>
        </div>

        <div class="col-sm-4">
          <h2 class="text-center">Users <b>Details</b></h2>
          <button *ngIf="metadata && metadata.addMD" (click)="addFunc(metadata)">{{metadata.addMD.label}}</button>
        </div>

        <div class="col-sm-4">
          <div class="search-box">
            <div class="input-group">

    -->MODIFY SOMETHING HERE
              <span class="input-group-addon"><i class="material-icons">&#xE8B6;</i></span>
              <input type="text" class="form-control" name="searchString" placeholder="Search..." [(ngModel)]="searchString">
            </div>
          </div>
        </div>
      </div>
    </div>

    <table class="table table-bordered">
      <thead>
      <tr>
        <th *ngFor="let col of columns" (click)="sortTable(col)">{{col}}
          <i *ngIf="col === columnSorted && !direction" class="material-icons">keyboard_arrow_up</i>
          <i *ngIf="col === columnSorted && direction" class="material-icons">keyboard_arrow_down</i>
        </th>
        <th>Actions</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let user of users | paginate: {itemsPerPage: pageSize,
                                               currentPage: page,
                                               totalItems: users.length}  | filterAll: searchString">
        <td *ngFor="let col of columns">{{user[col]}}</td>
        <td>
          <button [ngClass]="getClassCondition(act.actionType)" *ngFor="let act of actions"
                  (click)="actionFunc(act, user)">{{act.label}}</button>
        </td>
      </tr>
      </tbody>
    </table>

    <div align="center">
      <!--<div class="hint-text">Showing <b>{{totUsersPerPage}}</b> out of <b>{{users.length}}</b> entries</div>-->
      <ul align="center">
        <pagination-controls (pageChange)="pageChanged($event)"></pagination-controls>
      </ul>
    </div>

  </ul>
</div>

---

您希望表相应地过滤它们吗？你的问题不是很清楚，你能提供进一步的细节吗？我需要我的搜索栏，因为你看到它添加了一个下拉列表。在下拉列表中，我将拥有我的每一个colums标题。它们将有一个复选框，这样我的搜索功能将只搜索选定的值。我不知道如何做，也不知道如何将复选框连接到搜索方法。因此，假设您有一个包含以下列的表。-名字-姓氏-中间名你要说的是，你希望你的搜索栏搜索“名字”，例如，当这三个选项出现下拉时，用户会选择一个或多个，然后他们会点击“搜索”，然后会发生什么？预期的结果是什么？该表将显示特定列中具有该值的行。目前，我在表格的每一列中搜索每一个数据。您介意通过以下方式与我联系吗christopheelkhoury@gmail.com这样我就可以更好地理解你想做什么，然后我就可以提供一个详细的答案？你想让表格相应地过滤它们吗？你的问题不是很清楚，你能提供进一步的细节吗？我需要我的搜索栏，因为你看到它添加了一个下拉列表。在下拉列表中，我将拥有我的每一个colums标题。它们将有一个复选框，这样我的搜索功能将只搜索选定的值。我不知道如何做，也不知道如何将复选框连接到搜索方法。因此，假设您有一个包含以下列的表。-名字-姓氏-中间名你要说的是，你希望你的搜索栏搜索“名字”，例如，当这三个选项出现下拉时，用户会选择一个或多个，然后他们会点击“搜索”，然后会发生什么？预期的结果是什么？该表将显示特定列中具有该值的行。目前，我在表格的每一列中搜索每一个数据。您介意通过以下方式与我联系吗christopheelkhoury@gmail.com这样我就能更好地理解你想做什么，然后我就能提供一个详细的答案了？

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterAll'
})
export class FilterPipe implements PipeTransform {
  transform(value: any, searchText: any): any {
    if (!searchText) {
      return value;
    }
    return value.filter((data) => this.matchValue(data, searchText));
  }

  matchValue(data, value) {
    return Object.keys(data).map((key) => {
      return new RegExp(value, 'gi').test(data[key]);
    }).some(result => result);
  }
}