Html 要为将在相应列中搜索的每个列添加搜索框吗

我想为每一列添加搜索框，这将在相应的列中搜索。为此，我写了我的代码如下，但它不工作。 home.component.html

<table class="table">
  <tr>
    <th>Commit Date</th>
    <th>Commit Id</th>
    <th >Environment</th>
    <th>Jira Id's</th>
    <th >Upgrade Date</th>
  </tr>
  <tr>
    <th><input [(ngModel)]="searchString1" placeholder="Search.." class="advancedSearchTextbox"></th>
    <th><input [(ngModel)]="searchString2" placeholder="Search.." class="advancedSearchTextbox"></th>
    <th><input [(ngModel)]="searchStrin3" placeholder="Search.." class="advancedSearchTextbox"></th>
    <th><input [(ngModel)]="searchStrin4" placeholder="Search.." class="advancedSearchTextbox"></th>
    <th><input [(ngModel)]="searchString5" placeholder="Search.." class="advancedSearchTextbox"></th>
  </tr>
  <tr *ngFor="let data of history | filter :{ commit_date : searchString1, commit_id: searchString2, env: searchString3, jira_ids: searchString4, upgrade_date: searchString5};">
    <td class="text-left">
      {{data.commit_date}}
    </td>
    <td>{{data.commit_id}}</td>
    <td>{{data.env}}</td>
    <td>{{data.jira_ids}}</td>
    <td>{{data.upgrade_date}}</td>
  </tr>
</table>

如果我在顶部添加一个搜索框并更改HTML文件（如下所示），效果会很好：

Search Data Here: </b><input [(ngModel)]="searchString" placeholder="Search.." class="advancedSearchTextbox">
<table class="table">
  <tr>
    <th>Commit Date</th>
    <th>Commit Id</th>
    <th >Environment</th>
    <th>Jira Id's</th>
    <th >Upgrade Date</th>
  </tr>
  <tr *ngFor="let data of history | filter :{ commit_date : searchString, commit_id: searchString, env: searchString, jira_ids: searchString, upgrade_date: searchString};">
    <td class="text-left">
      {{data.commit_date}}
    </td>
    <td>{{data.commit_id}}</td>
    <td>{{data.env}}</td>
    <td>{{data.jira_ids}}</td>
    <td>{{data.upgrade_date}}</td>
  </tr>
</table>

在此搜索数据：
提交日期
提交Id
环境
吉拉的
升级日期
{{data.commit_date}
{{data.commit_id}
{{data.env}}
{{data.jira_ids}
{{data.upgrade{u date}

---

要使搜索框适用于每一列，我需要做哪些更改使用一个参数进行搜索输入，并使用函数获取列的键和名称，如下所示：

HTML:

<table class="table">
  <tr>
    <th>Commit Date</th>
    <th>Commit Id</th>
    <th >Environment</th>
    <th>Jira Id's</th>
    <th >Upgrade Date</th>
  </tr>
  <tr>
    <th><input  placeholder="Search.." class="advancedSearchTextbox" [ngModel]="searchString" (ngModelChange)="search($event,'commit_date')" ></th>
    <th><input placeholder="Search.." class="advancedSearchTextbox" [ngModel]="searchString" (ngModelChange)="search($event,'commit_id')"></th>
    <th><input placeholder="Search.." class="advancedSearchTextbox" [ngModel]="searchString" (ngModelChange)="search($event,'env')"></th>
    <th><input placeholder="Search.." class="advancedSearchTextbox" [ngModel]="searchString" (ngModelChange)="search($event,'jira_ids')"></th>
    <th><input placeholder="Search.." class="advancedSearchTextbox" [ngModel]="searchString" (ngModelChange)="search($event,'upgrade_date')"></th>
  </tr>
  <tr *ngFor="let data of filterData">
    <td class="text-left">
      {{data.commit_date}}
    </td>
    <td>{{data.commit_id}}</td>
    <td>{{data.env}}</td>
    <td>{{data.jira_ids}}</td>
    <td>{{data.upgrade_date}}</td>
  </tr>
</table>

  history = [
    {
      commit_date: "20/02/2019",
      commit_id: "52",
      env: "log",
      jira_ids: "jira",
      upgrade_date: "02/03/2019"
    },
    {
      commit_date: "03/03/2019",
      commit_id: "53",
      env: "log",
      jira_ids: "jira",
      upgrade_date: "03/04/2019"
    }
  ];
  searchString="";
  filterData:any=[];

  constructor(){
    this.filterData = this.history;
  }

  search(term,columnName){
       if(!term) {
      this.filterData = this.history;
    } else {
      this.filterData = this.history.filter(x => 
         x[columnName].trim().toLowerCase().includes(term.trim().toLowerCase())
      );
    }
  }

---

为搜索输入使用一个参数，并使用函数获取列的键和名称，如下所示：

HTML:

<table class="table">
  <tr>
    <th>Commit Date</th>
    <th>Commit Id</th>
    <th >Environment</th>
    <th>Jira Id's</th>
    <th >Upgrade Date</th>
  </tr>
  <tr>
    <th><input  placeholder="Search.." class="advancedSearchTextbox" [ngModel]="searchString" (ngModelChange)="search($event,'commit_date')" ></th>
    <th><input placeholder="Search.." class="advancedSearchTextbox" [ngModel]="searchString" (ngModelChange)="search($event,'commit_id')"></th>
    <th><input placeholder="Search.." class="advancedSearchTextbox" [ngModel]="searchString" (ngModelChange)="search($event,'env')"></th>
    <th><input placeholder="Search.." class="advancedSearchTextbox" [ngModel]="searchString" (ngModelChange)="search($event,'jira_ids')"></th>
    <th><input placeholder="Search.." class="advancedSearchTextbox" [ngModel]="searchString" (ngModelChange)="search($event,'upgrade_date')"></th>
  </tr>
  <tr *ngFor="let data of filterData">
    <td class="text-left">
      {{data.commit_date}}
    </td>
    <td>{{data.commit_id}}</td>
    <td>{{data.env}}</td>
    <td>{{data.jira_ids}}</td>
    <td>{{data.upgrade_date}}</td>
  </tr>
</table>

  history = [
    {
      commit_date: "20/02/2019",
      commit_id: "52",
      env: "log",
      jira_ids: "jira",
      upgrade_date: "02/03/2019"
    },
    {
      commit_date: "03/03/2019",
      commit_id: "53",
      env: "log",
      jira_ids: "jira",
      upgrade_date: "03/04/2019"
    }
  ];
  searchString="";
  filterData:any=[];

  constructor(){
    this.filterData = this.history;
  }

  search(term,columnName){
       if(!term) {
      this.filterData = this.history;
    } else {
      this.filterData = this.history.filter(x => 
         x[columnName].trim().toLowerCase().includes(term.trim().toLowerCase())
      );
    }
  }

---

是否要使用searchbox执行类似筛选器的操作？是否每次搜索都会清除上一次搜索或搜索时搜索？是的，我想使用搜索框进行筛选，每次搜索都会清除上一次搜索。但若我为两个不同的列设置两个过滤器，它应该返回这些列的交点。我希望你能理解我的意思。你必须使用管道吗？如果有其他方法不用管道也可以做到这一点，那它是受欢迎的。我还添加了一张图片供参考。请看我的答案。你想用搜索框过滤吗？是否每次搜索都会清除上一次搜索或搜索时搜索？是的，我想使用搜索框进行筛选，每次搜索都会清除上一次搜索。但若我为两个不同的列设置两个过滤器，它应该返回这些列的交点。我希望你能理解我的意思。你必须使用管道吗？如果有其他方法不用管道也可以做到这一点，那它是受欢迎的。我还添加了一张图片供参考。请看我的答案