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

您可以使用过滤器管道达到目标。

遵循ngx-filter-pipe并相应地更改代码。当您输入文本字段时，可以使用管道直接过滤数据。您可以根据需要自定义功能。（3个字符后开始搜索）

Answer 2

用这么多的信息很难给您一个确切的答案，但是据我所知，您可能试图显示和隐藏包含某些数据的<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>

输入超过3个字符时如何过滤数据

2 个答案: