角度数据源过滤器

Question

我有一个正在渲染到表格的对象列表，您可以查看示例截图。我正在尝试根据#searchTransactionUserInput placeholder="" (keyup)="applyFilter($event)"过滤数据

您可以看到从作为表格数据源的示例屏幕截图返回的数据。当前的问题是，当我搜索关键字“ron”时，它返回的其他数据与该键不匹配，例如，如果关键字是“ro”，它应该只返回用户 Ronnie js Renil，但当前它也返回“用户两个”

我当前的过滤算法似乎有什么问题？有什么想法吗？谢谢。

过滤或搜索的优先级是按全名过滤。

#table数据源

表格数据来源：

#UI

用户界面示例：

#html代码

<div class="search" fxLayoutAlign="start" fxFill>
  <mat-form-field appearance="standard" fxFill>
    <mat-label style="font-size: 12px"
      >Filter users by name, company or title</mat-label
    >
    <input
      matInput
      #searchTransactionUserInput
      placeholder=""
      (keyup)="applyFilter($event)"
    />
    <button
      mat-button
      *ngIf="searchTransactionUserInput"
      matSuffix
      mat-icon-button
      aria-label="Clear"
      (click)="clearSearch()"
    >
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
</div>

#tscode

applyFilter(filterValue: any) {
  const data = filterValue.target.value;
  filterValue = data.trim(); // Remove whitespace
  filterValue = data.toLowerCase(); // Datasource defaults to lowercase matches
  this.dataSource.filter = data;

}

clearSearch(): void {
  this.searchTransactionUserInput.nativeElement.value = '';
  this.dataSource.filter = null;
  this._transactionUserPageEvent();
}

Answer 1

试试这个。这是我的工作代码：

<div *ngIf="isSearch" class="search-box-container">
<mat-form-field class="search-box-form-field">
  <mat-label>Search by Keyword</mat-label>
  <input #search matInput type="text" (keyup)="onSearchKeyUp(search)">
  <button mat-button *ngIf="search" matSuffix mat-icon-button aria-label="Clear" (click)="onClearClicked(search)">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

onSearchKeyUp(search: { value: any; }) {
var currentFilter = search.value;
this.dataSource.filter = currentFilter;

if (this.dataSource.paginator) {
  this.dataSource.paginator.firstPage();
}

onClearClicked(search: { value: string; }) {
this.dataSource.filter = "";
search.value = "";

if (this.dataSource.paginator) {
  this.dataSource.paginator.firstPage();
}