Как я могу отфильтровать данные, когда я набираю более 3 символов

Question

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

здесь HTML

<mat-form-field>
  <input matInput id="search-field" (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>
<a [routerLink]='["/doctors/new"]' class="doctors-list-newDoctor-button">
  <button mat-raised-button id="doctors-list-newDoctor-button">
    <i class="material-icons">
      add
    </i>
  </button>
</a>
<div>

  <table mat-table matSort [dataSource]="this.displayedDoctors" id="doctors-list-table" (matSortChange)="sortData($event)" class="mat-elevation-z8">
    <ng-container matColumnDef="lastName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header id="doctors- 
        list-lastName-header">lastName</th>
      <td mat-cell *matCellDef="let doctor" class="doctor-lastName">
        {{doctor.lastName}}</td>
    </ng-container>
    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef id="doctors-list-firstName- 
        header">firstName</th>
      <td mat-cell *matCellDef="let doctor" class="doctor-firstName">
        {{doctor.firstName}}</td>
    </ng-container>
    <ng-container matColumnDef="format">
      <th mat-header-cell *matHeaderCellDef id="doctors-list-format- 
            header">format</th>
      <td mat-cell *matCellDef="let doctor" class="doctor-inami">
        {{doctor.format}}</td>
    </ng-container>
    <ng-container matColumnDef="inami">
      <th mat-header-cell *matHeaderCellDef id="doctors-list-inami- 
       header">inami</th>
      <td mat-cell *matCellDef="let doctor" class="doctor-format">
        {{doctor.inami}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="DoctorsListHeaders"></tr>
    <tr mat-row *matRowDef="let row; columns: DoctorsListHeaders;" (click)="OpenDoctor(row)"></tr>
  </table>
</div>

здесь модель

export interface Doctor {
  lastName: string;
  firstName: string;
  format: string;
  inami: string;
  _id: string;
}

export const EMPTY_DOCTOR: Doctor = {
  lastName: null,
  firstName: null,
  format: null,
  inami: null,
  _id: null
}

здесь машинопись

applyFilter(filterValue: string) {
  this.filterSearch = filterValue.toLowerCase();

  this.doctorsService.getAll({ lastName: this.filterSearch, inami: this.filterSearch }).subscribe((doctors: Doctor[]) => {
    //this.dataDoctors = doctors;
    this.displayedDoctors.data = this.dataDoctors;
    if (this.filterSearch.length >= 3) {


    }
    if (this.tableSort) {
      this.sortData(this.tableSort);
    }
  });
}  

Answer 1

Трудно дать вам точный ответ с таким количеством информации, но из того, что я могу сделать вывод, вы, вероятно, пытаетесь показать и скрыть <div>, содержащий некоторые данные, и это зависит от длины filterSearch.

Вот что я предлагаю:

В ваш component.ts мы добавляем еще один логический вызов свойства showData, которому будет присвоено значение true или false в зависимости от длины входного поиска.

showData: boolean = false;
.
.
.

applyFilter(filterValue: string) {

  this.filterSearch = filterValue.toLowerCase();

  this.doctorsService.getAll({
    lastName: this.filterSearch,
    inami: this.filterSearch
  }).subscribe((doctors: Doctor[]) => {

    this.dataDoctors = doctors;

    if (this.filterSearch.length >= 3) {
      this.showData = true;
    } else {
      this.showData = false;
    }
    if (this.tableSort) {
      this.sortData(this.tableSort);
    }
  });
}

И в вашем component.html добавьте директиву ngIf, которая будет отображать или скрывать эти данные на основе логического условия showData

<div *ngIf="showData">
<!-- data from dataDoctors -->
</div>

Answer 2

Вы можете использовать трубу фильтра для достижения своей цели.

Следуйте ngx-filter-pipe и внесите соответствующие изменения в свой код.Используя pipe, вы можете напрямую фильтровать данные, когда вы набираете текст в поле.Вы можете настроить функциональность в соответствии с вашими потребностями. (Начать поиск после 3 символов)