angular - 在角度中使用自定义管道实现搜索

Question

我尝试使用搜索框在 Angular 6 中实现我自己的管道，以过滤我的广告系列列表。奇怪的是，我无法过滤广告系列列表。我在下面发布我的代码。

这是我的过滤器的样子：

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

@Pipe({
  name: 'nameFilter'
})

export class NameFilterPipe implements PipeTransform {
  transform(values: any[], key: string, value: string): any[] {
    debugger;

    if (!values) {
      return [];
    }
    if (!value) {
      return values;
    }
    return values.filter(val => val.CampaignName === value);
  }
}

<input [(ngModel)]="searchText" placeholder="search here">

<tr *ngFor="let campaign of campaigns?.result | nameFilter : searchText">

  <td style="max-width:280px">
  
    <p>{{campaign.CampaignName}}</p>
    
    <small><span class="cursor" (click)="filterByOwnr(campaign.DepartmentName)" > {{ campaign.DepartmentName }} &nbsp; &nbsp; </span></small>
    
  </td>

我调试了我的管道，这就是它的样子：

我能够将值获取到我的管道，但无法在我的 html 页面中应用过滤器。

PS：尝试@Arcteezy 后，我收到以下错误。

console.log(field)的控制台日志：

标签： angularangular6angular-pipe

Answer 1

尝试这个，

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

    @Pipe({
        name: 'filter'
    })

    @Injectable()
    export class FilterPipe implements PipeTransform {
        transform(items: any[], field: string, value: string): any[] {

            console.log(value);
            if (!items) {
                return [];
            }
            if (!field || !value) {
                return items;
            }

            return items.filter(singleItem => singleItem[field].toLowerCase().includes(value.toLowerCase()));
        }
    }

在您的 HTML 中，

    *ngFor = "let... | filter : '<search_field>' : searchText"