Question

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

表中的数据来自资产下本地存储的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

问题是因为您的管道名称为 countrysearch ，但是在html文件中您已经写了[node()[name() != 'persName']]，而应该是filter: searchText

pipe.ts中的其他名称将名称更改为countrysearch: searchText，而不是filter

Answer 2

按照理查德提到的方式发布代码后，应按以下步骤将Pipe更改为countrysearch，

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

并使用空处理顺序和属性过滤 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);
    });
   }
  }
}

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

2 个答案: