我正在嘗試在我的 Angular 應用程式中實作一個搜索欄，它將過濾來自 API 的資料。我正在使用以下教程：
正如教程所述，我首先創建了搜索欄：
<!-- Search Bar -->
<input type="search" class="searchBar" [(ngModel)]="searchText" placeholder="Search for a player...">
然后我將過濾器添加到我現有的*ngFor：
<!-- Before -->
<div *ngFor="let player of player_list | paginate: config">
<!-- Adding filter -->
<div *ngFor="let player of player_list | paginate: config | filter: searchText">
在我的終端中，我然后運行：
ng generate pipe filter
這創建了 2 個新檔案：
app
|___ filter.pipe.spec.ts
|___ filter.pipe.ts
然后我將此代碼添加到filter.pipe.ts：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) {
return [];
}
if (!searchText) {
return items;
}
searchText = searchText.toLocaleLowerCase();
return items.filter(it => {
return it.toLocaleLowerCase().includes(searchText);
});
}
}
但是當我回傳瀏覽器時，我收到以下錯誤訊息：
我如何players.component.ts從filter.pipe.ts. 我試過像這樣匯入它：
// players.component.ts file
import { FilterPipe } from './filter.pipe';
...
constructor(public webService: WebService, public filterPipe: FilterPipe) {}
但這不起作用，有人可以幫忙嗎？
uj5u.com熱心網友回復：
很明顯，在 PlayersComponent 上不存在 searchText。您需要在 PlayersComponent 上定義 searchText。
@Component({
selector: 'players',
templateUrl: './players.component.html',
styleUrls: ['./players.component.css']
})
export class PlayersComponent {
searchText = ''; // This is missing..
ngOnInit() {
this.subscriptions.push(this.webService.getPlayers().subscribe((response: any) => {
this.player_list = response;
}));
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403095.html
標籤：