Угловая фильтрация: проблема при очистке окна поиска

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

Вот мой Ts-код:

export class AdherentsComponent implements OnInit {
  adherents: adherent[];
  name: string;

  constructor(private adherentService: AdherentService, private alertify: AlertifyService) { }

  ngOnInit() {
    this.getAdherents();
    this.name = "";
  }

  getAdherents() {
    this.adherentService.getAdherents().subscribe((
      adherents: adherent[]) => {
      this.adherents = adherents;
    }, error => { this.alertify.error(error); })
  }

  

  Search() {
    if (this.name.length > 0) {
      this.adherents = this.adherents.filter(res => {
        return res.nomcomplet.toLowerCase().match(this.name.toLowerCase());
      })
    }
    else if (this.name.length === 0) {
      this.adherents = this.adherents;
      console.log(this.adherents.length);
    }
  }



}

Вот мой HTML-код:

<body >
<main role="main" class="container" >
<div  class="jumbotron" style="background-color: white;">
  <h2>Liste des Adhérents</h2>
  <input type="text" [(ngModel)]="name" (input)="Search()" />  
  <table class="table table-hover">
    <thead class="thead-light">
<tr>
   <th>Nom Complet</th>
   <th>Grade</th>
   <th>Poste</th>
   <th>Telephone</th>
   <th>E-mail</th>
   <th></th>
 </tr>
 </thead>

     <tr *ngFor="let item of adherents">
       <td>{{item.nomcomplet}}</td>
       <td>{{item.grade}}</td>
       <td>{{item.poste}}</td>
       <td>{{item.telephone}}</td>
       <td>{{item.email}}</td>
       <td><button [routerLink]="['/adherents/', item.id]" style="margin-right: 0.2em;" title="Details" class="btn-sm btn-secondary text-white"><i class="fa fa-eye"></i></button>
        <button [routerLink]="['/adherentEdit/', item.id]"
        style="margin-right: 0.2em;" title="Modifier" class="btn-sm btn-primary text-white"><i class="fa fa-edit"></i></button></td>
     </tr>
   </table>

   
</div>
</main>
</body>

Пожалуйста, как я могу изменить функцию Search(), чтобы я мог динамически получать данные из массива при изменении значения в поле поиска?


arrays angular filter
person Anas CHERIET    schedule 20.07.2020    source источник
comment
Мой ответ решил вашу проблему?   -  person Rob Monhemius    schedule 26.07.2020

Ответы (2)


arrow_upward
0
arrow_downward

Используйте другую переменную для всех значений и еще одну для значений, отображаемых пользователю. При поиске вы фильтруете все элементы и сохраняете их в массив, который вы используете для отображения пользователю. То же самое происходит, когда вы очищаете окно поиска, просто получаете все значения и сохраняете их в этот массив.

person Albjon    schedule 20.07.2020

arrow_upward
0
arrow_downward

Вы заменяете значение свойства _adherents, которое содержит все значения, новым значением.

Вместо этого вы могли бы

  • сделать _adherents закрытым.
  • Создайте еще одно свойство current_adherents, представляющее массив ваших отфильтрованных/отсортированных выходных данных.
  • Используйте current_adherents в своем шаблоне.

пример кода

export class AdherentsComponent implements OnInit {
  private _adherents: adherent[];
  public current_adherents: adherent[];
  name: string;
  // removed code irrelevant to the question   
  Search() {
    this.current_adherents = this._adherents.filter(res => {
      return res.nomcomplet.toLowerCase().match(this.name.toLowerCase());
    })
  }  
}

Редактировать: если имя по определению является пустой строкой, оно будет соответствовать всем элементам. Таким образом, вы также можете удалить свою логику if/else ;).

person Rob Monhemius    schedule 20.07.2020