使用自定义管道作为表上的搜索过滤器

Question

所以我有这张表，里面有数据。现在我想实现一个搜索栏，在搜索后过滤表格。为此，我假设我需要使用管道来过滤搜索。但是，这对我不起作用，我不知道这怎么可能。

表中的数据来自assets下本地存储的json文件。该表写在 app.compinent.html 文件中。

我已经创建了一个管道，但我不知道它里面的代码应该是什么。

这是我正在尝试完成的一个示例，但是数据位于一个表中，该表从本地存储的文件中获取数据。

https://stackblitz.com/edit/angular-5ujgcy

我的代码：

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


@Pipe({
  name: 'countrysearch'
})


export class CountrysearchPipe implements PipeTransform {
  transform(Country: any[], searchText: string): any[] {
    if(!Country) return [];
    if(!searchText) return Country;
searchText = searchText.toLowerCase();
return Country.filter( it => {
      return it.toLowerCase().includes(searchText);
    });
   }
}

//html

<input [(ngModel)]="searchText" placeholder="search text goes here">
    <ul>
        <li *ngFor="let country of Countries | filter : searchText">
        {{countries.Name}}
        </li>
    </ul>


    <table border="1">
        <!-- ADD HEADERS -->
        <tr>
            <th>>Name</th>
            <th>People</th>

<tr *ngFor="let country of Countries ">
            <td>{{ country.Name }}</td>
            <td>{{ country.People }}</td>
</tr>
</table>

Answer 1

按照 Richard 所说的那样发布您的代码后，您应该将 Pipe 更改为 countrysearch，如下所示，

  <li *ngFor="let country of Countries | countrysearch : searchText">
        {{countries.Name}}
 </li>

并使用 null 处理顺序和属性过滤修改您的管道 Name 以避免出现以下任何错误，

export class CountrysearchPipe implements PipeTransform {
  transform(Country: any[], searchText: string): any[] {
    if(!Country) return [];
    if(!searchText) return Country;
    if(Country && Country.length > 0){
searchText = searchText.toLowerCase();
return Country.filter( it => {
      return it.Name.toLowerCase().includes(searchText);
    });
   }
  }
}

Answer 2

问题是因为你的管道名称是 countrysearch 但在你的 html 文件中你写了 filter: searchText 它应该是 countrysearch: searchText

在您的 pipe.ts 中的其他地方将名称更改为 filter 而不是 countrysearch