Поиск по столбцам с использованием фильтра angular - PullRequest
Новая
       24

Поиск по столбцам с использованием фильтра angular

0 голосов
/ 21 января 2020

Ниже мой вид таблицы. В каждом столбце выполняется поиск

На основе текста, который я набираю в конкретном столбце, только этот столбец необходимо искать.

Проблема, с которой я сталкиваюсь, заключается в следующем: Когда я набираю в одном столбце один и тот же текст появляется в других столбцах также. Чтобы решить эту проблему, я использовал следующий код: 

        <tr>
            <th *ngFor="let head of headElements; let i = index" scope="col">
                <h5 class="text-color">{{head}}</h5>
                <div class="md-form mb-0">
                    <input [(ngModel)]="searchText[i]" type="text" class="form-control" 
                      id="search_{{i}}" mdbInput />
                    <label for="search_{{i}}">Search</label>
                </div>
            </th>
        </tr>

Дав [(ngModel)]="searchText[i]" или [(ngModel)]="searchText[head]", я могу ввести другой текст в другое поле ввода.

Я не могу получить текст, набранный в фильтре: searchText;

Ниже приведен мой код для просмотра данных таблицы 

    <tbody>
        <tr *ngFor="let el of elements | filter : searchText; let i = index" mdbWavesEffect>
            <td class="p-2" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"
                scope="row">{{el.firstName}} {{el.middleName}} {{el.lastName}}</td>
            <td class="p-2" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                {{el.mobileNumber}}</td>
            <td class="p-2" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                {{el.joiningYear}}</td>
            <td class="p-2" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                {{el.emailId}}</td>
            <td class="p-2" *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">
                {{el.designation}}</td>
        </tr>
    </tbody>

Далее я объявил searchText: any = []; в файле conponent.ts, иначе выдает ошибку undefined

Последний код моего фильтра 

  if (!employees || !searchTerm) {
    return employees;
  }
  return employees.filter(employee =>
    employee.mobileNumber.toLowerCase().indexOf(searchTerm) !== -1);

}

1 Ответ

0 голосов
/ 21 января 2020

Вместо использования конвейера фильтра для элемента <tr> попробуйте прослушать событие изменения в элементе <input>. 

<tr>
        <th *ngFor="let head of headElements; let i = index" scope="col">
            <h5 class="text-color">{{head}}</h5>
            <div class="md-form mb-0">
                <input [(ngModel)]="searchText[i]" (change)="filterElements(searchText[i])" type="text" class="form-control" 
                  id="search_{{i}}" mdbInput />
                <label for="search_{{i}}">Search</label>
            </div>
        </th>
    </tr>

В классе компонента: 

private elementsCopy = Object.assign({}, this.elements);
public filterElements(searchTerm){
    if (!this.elementsCopy || !searchTerm) {
        return this.elementsCopy ;
      }
  return this.elementsCopy.filter(employee =>
    employee.mobileNumber.toLowerCase().indexOf(searchTerm) !== -1);

}

Надеюсь, это поможет.

...