我想在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;
}
}
答案 0 :(得分:1)
以下内容将帮助您实现相同目标:
<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>
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;
}
}
在您的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 })
}
}
答案 1 :(得分:0)
如果我没有错,这就是你想要达到的目标 每当我输入文本框并且它与列表中的任何数据的名称匹配时,我需要显示图像和相应的名称,对吗?
您可以在模板中使用 * 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 。