Angular 6过滤多个表列

Question

我有一张包含银行详细信息的表格，我想根据搜索字段输入过滤整个表格列。但它不起作用，有人可以帮我调试这个问题。当我在搜索字段中输入内容时，整个表格数据都消失了。

<div>
  <div>
    <select (change)="OnSelectedCity($event)">
      <option *ngFor="let cityObj of cityList" [value]="cityObj.value">{{cityObj.displayValue}}</option>
    </select>
    <input type="text" [(ngModel)]="filterText" [formControl]="filterInput" />
  </div>
  <div>
    <table>
      <thead>
        <tr>
          <th *ngFor="let header of tableHeader">{{header}}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let bank of bankList | filterdata: filterText">
          <td>{{bank.ifsc}}</td>
          <td>{{bank.bank_id}}</td>
          <td>{{bank.branch}}</td>
          <td>{{bank.address}}</td>
          <td>{{bank.city}}</td>
          <td>{{bank.district}}</td>
          <td>{{bank.state}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div> 



transform(items: Array<any>, searchText: string): any {
    if (searchText !== undefined) {
      return items.filter(item => {
        const filter = Object.keys(item);
        filter.forEach(element => {
          if (item[element].toLowerCase().indexOf(searchText.toLowerCase()) === -1) {
            return false;
          }
          return true;
        });
      });
    } else {
      return items;
    }
  }

Answer 1

您的管道中只有一个简单的错误。错误在于.forEach 调用，因为无法停止或中断forEach 循环，请参阅docs。

调整后您的管道可能如下所示：

transform(items: Array<any>, searchText: string): any {
    if (searchText) {
        return items.filter(item => {
            const filter = Object.keys(item);
            // Array.some() returns true if at least one entry meets the given condition
            return filter.some(
                key => item[key].toLowerCase().indexOf(searchText.toLowerCase()) !== -1
            )
        });
    }

    return items;
}