我有一個被渲染到表格的物件串列，您可以在螢屏截圖中看到示例。我正在嘗試根據 #searchTransactionUserInput placeholder="" (keyup)="applyFilter($event)"
您可以看到從表資料源的示例螢屏截圖中回傳的資料。當前的問題是，當我搜索關鍵字“ron”時，它會回傳與鍵不匹配的其他資料，例如，如果關鍵字是“ro”，它應該只回傳用戶 Ronnie js Renil 但當前它也回傳“user二”
我目前的過濾演算法似乎有什么問題？有什么想法嗎？謝謝。
過濾器或搜索的優先級是按全名過濾。
#table資料源
表資料源：
#用戶界面
示例用戶界面：
#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();
}
uj5u.com熱心網友回復：
嘗試這個。這是我的作業代碼：
<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();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/365775.html