Как создать функциональную панель поиска в Ionic 4?

Question

В настоящее время я занимаюсь разработкой небольшого проекта Ionic 4 для колледжа, который использует Google Firebase для сохранения и хранения данных, который будет использоваться курсом / классом медсестер для облегчения их работы, когда речь идет о сохранении данных пациентов иподробности теста.

На странице, которая показывает всех зарегистрированных пациентов, у меня есть ion-searchbar , который будет использоваться для фильтрации пациентов по имени и ng-контейнера с * ngFor , который извлекает всех зарегистрированных пациентов из базы данных и помещает их в ion-карты .

<ion-searchbar placeholder="Search..." expand="full" color="abwb" [(ngModel)]="searchQuery" (ionChange)="search()"></ion-searchbar>

<ng-container *ngFor="let patient of dBase">

    <ion-card color="abwb">
      <ion-card-header style="font-weight: bold">{{patient.name}}</ion-card-header>
      <ion-card-content>
        <ion-button [routerLink]="['/pat-prf', patient.id]" color="bwab">PROFILE<ion-icon name="person" slot="start"></ion-icon></ion-button>
        <ion-button [routerLink]="['/pat-tst', patient.id]" color="bwab">TESTS<ion-icon name="list-box" slot="start"></ion-icon></ion-button>
      </ion-card-content>
    </ion-card>

</ng-container>

Мне удалось получить значение из того, чтоввод в поле поиска для отображения с помощью действия console.log () , но я понятия не имею, как заставить его пойти и искать в базе данных указанные имена ИЛИ чтобы в ng-контейнере отображались только карточки с совпадающими именами.

Мне сказали, что для этого нужно использовать * ngIf . вещь, но я, честно говоря, понятия не имел, чдолжным образом использовать его для такого рода вещей. Кто-нибудь может указать мне правильное направление?

Answer 1

У вас есть два решения: решение Frontend и решение Backend.

Решение Frontend

Frontend - отфильтровать список из спискасервер. Это может использовать Array.prototype.filter () . Чтобы выполнить эту работу, бэкэнд должен вернуть всех пациентов без нумерации страниц (который может работать для небольшого списка, но не предпочтителен для большого списка).

// allPatients will contain all the results from the server and dBase will be filtered
private allPatients = [];

ngOnInit() {
   this.httpClient.get(MY_API_TO_GET_PATIENTS)
    .subscribe(response => this.allPatients = this.dBase = response )
}

search() {
  this.dBase = allPatients.filter(item => item.name.includes(this.searchQuery));
}

Базовое решение

В этом решении мы отправим запрос в серверную часть, содержащую поисковый запрос. Затем Бэкэнд ответит результатами, которые соответствуют поисковому запросу. Здесь нам нужно будет только отправлять новый запрос на сервер каждый раз, когда пользователь вводит новое значение.

search() {
  this.httpClient.get(MY_URL, {params: {searchQuery: this.searchQuery})
    .subscribe(response => this.dBase = response )
}