Question

我想在Angular 4中创建自定义搜索过滤器。名称应包含搜索文本，并且应显示相应的名称和图像。我已尝试过下面的代码，但它不起作用。我无法找到原因。

JSON数据：

[  
   {  
      "name":"The Birds",
      "poster-image":"poster5.jpg"
   },
   {  
      "name":"Rear Window",
      "poster-image":"poster8.jpg"
   },
   {  
      "name":"Family Pot",
      "poster-image":"poster5.jpg"
   },
   {  
      "name":"Family Pot",
      "poster-image":"poster9.jpg"
   }
]

HTML code：

<div id="ProductContainer">
    <input [(ngModel)]="searchText" placeholder="search text goes here">
  <div id="Product"  *ngFor = "let data of httpdatanew">
    <img src="\assets\images\{{data.posterimage}}">
    <br/>
    <p id="Prodname">{{data.name | prodfilter : searchText}}</p>
  </div>
</div>

Filter.TS：

import { Pipe,PipeTransform} from '@angular/core';
@Pipe ({
  name : 'prodfilter'
})

export class FilterPipe implements PipeTransform {
    transform(value: any, input: string) {
        if (input) {
            input = input.toLowerCase();
            return value.filter(function (el: any) {
                return el.toLowerCase().includes(input);
            })
        }
        return value;
    }
}

Answer 1

以下内容将帮助您实现相同目标：

HTML

<div id="ProductContainer">
  <input [(ngModel)]="searchText" placeholder="search text goes here" (ngModelChange)="prodFilter()">
  <div id="Product" *ngFor="let data of httpdatanew">
    <img src="\assets\images\{{data.posterimage}}">
    <br/>
    <p id="Prodname">{{data.name}}</p>
  </div>
</div>

FiltradoService

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

@Injectable()
export class FiltradoService implements PipeTransform {

  constructor() { }

  transform(lista: any[], filter: any): any[] {
    if (!lista || !filter) {
      return lista;
    }
    return lista.filter((item: any) => this.applyFilter(item, filter));
  }

  applyFilter(arreglo: any, filter: any): boolean {
    for (const field in filter) {
      if (filter[field]) {
        if (typeof filter[field] === 'string') {
          if (arreglo[field].toLowerCase().indexOf(filter[field].toLowerCase()) === -1) {
            return false;
          }
        } else if (typeof filter[field] === 'number') {
          if (arreglo[field] !== filter[field]) {
            return false;
          }
        }
      }
    }
    return true;
  }
}

Filter.TS

在您的TS文件中包含FiltradoService

import { FiltradoService } from '../../../service/filtrado.service';

并将以下代码放在TS文件中

export class AppComponent implements OnInit {

httpdatanew = [
    {
      "name": "The Birds",
      "poster-image": "poster5.jpg"
    },
    {
      "name": "Rear Window",
      "poster-image": "poster8.jpg"
    },
    {
      "name": "Family Pot",
      "poster-image": "poster5.jpg"
    },
    {
      "name": "Family Pot",
      "poster-image": "poster9.jpg"
    }
  ]
searchText: any;
httpDataOrig: any;

 constructor( private filtradoService: FiltradoService){}

 ngOnInit() {

    this.httpDataOrig = this.httpdatanew;
}

prodFilter() {

    this.httpdatanew = this.filtradoService.transform(this.httpDataOrig, { 'name': this.searchText })


  }

}

Answer 2

如果我没有错，这就是你想要达到的目标 每当我输入文本框并且它与列表中的任何数据的名称匹配时，我需要显示图像和相应的名称，对吗？

您可以在模板中使用 * ngIf ，而无需使用管道，如下所示。在满足条件之前，这不会加载DOM中的元素。

<div id="ProductContainer">
 <input [(ngModel)]="searchText" placeholder="search text goes here">
  <div id="Product"  *ngFor = "let data of httpdatanew">
   <div *ngIf="data.name.toLowerCase().includes(searchText.toLowerCase()) 
        && searchText.length != 0">

     <img src="\assets\images\{{data.posterimage}}">
     <br/>
     <p id="Prodname">{{data.name}}</p>

   </div>
  </div>
</div>

您可以删除＆amp;＆amp;如果要在文本框为空时默认显示所有数据，请从* ngIf搜索searchText.length！= 0 。

自定义搜索过滤器，用于json数据角度4

2 个答案:

HTML

FiltradoService

Filter.TS