自定義搜索過濾器以獲取JSON數據angular 4

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代碼：

<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>

如果要在文本框為空時默認顯示所有數據，則可以從* ng中刪除&& searchText.length！= 0 。