Question

I have a table with bank details and I want to filter all across the table column based on the search field input. But its not working, can someone please help me debug the issue. When I'm typing something on the search field then the entire table data is disappearing.

<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;
}

Angular 6 filter multiple table column

1 个答案: