如何在表格上實現角度上的簡單搜索功能並僅顯示匹配行

Question

我在表格上有搜索選項，我想在用戶需要的頁面上顯示搜索到的內容。我如何通過在打字稿的代碼中編寫相應的功能來實現這一點。

Answer 1

使用* ngFor在你的表中創建行和使用管道

<tr *ngFor="let item of items | filterPipe: searchToken"> 

添加一個搜索欄

<input placeholder="Type to filter" [(ngModel)]="searchToken"/> 

在組件添加變量searchToken

searchToken: string; 

添加自定義管道：

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'filterPipe' 
}) 
export class FilterPipe implements PipeTransform { 

    transform(items: any[], searchToken: string) { 


     if (searchToken == null) 
      searchToken = ""; 


     searchToken = searchToken.toLowerCase(); 

     return items.filter(elem => elem.name.toLowerCase().indexOf(searchToken) > -1); 
    } 

} 

最後不要忘了把管道進入聲明中ngModule：

declarations: [ App, FilterPipe ]