(Панель поиска) как отображать данные после ввода пользователем строки поиска?

Question

на данный момент мой код отображается в списке данных после того, как я открываю страницу, как скрыть данные и показывать их только тогда, когда пользователь вводит панель поиска

filterList(evt) {
    this.initializeItems();

    const searchTerm = evt.srcElement.value;

    if (!searchTerm) {
      return;
    }
    this.users = this.users.filter(currentUser => {
      if (currentUser.name && searchTerm) {
        if (currentUser.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) {
          return true;
        }
        return false;
      }
    });
  }

и это файл html

<ion-searchbar [(ngModel)]="searchTerm"  showCancelButton (ionInput)="filterList($event)"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let user of users"> 
  <ion-avatar>
    <img src="{{user.images}}">
  </ion-avatar> &nbsp;
  <ion-label>{{user.name}}</ion-label>
</ion-item>
</ion-list>

Answer 1

Чтобы показать или скрыть что-либо, мы можем добавить свойство [hidden] к нашему элементу, например:

<ion-searchbar [(ngModel)]="searchTerm"  showCancelButton (ionInput)="filterList($event)"></ion-searchbar>
<ion-list [hidden]="!searchTerm" >
<ion-item *ngFor="let user of users"> 
  <ion-avatar>
    <img src="{{user.images}}">
  </ion-avatar> &nbsp;
  <ion-label>{{user.name}}</ion-label>
</ion-item>
</ion-list>

Это будет отображать или скрывать ваш список на основе значения searchTerm. Если у него нет значения, список скрыт. И если есть значение, список виден.

EDIT

Взгляните на эту демонстрацию stackBlitz: https://stackblitz.com/edit/angular-ivy-df8ecx?file=src%2Fapp%2Fapp.component.html