json数据自定义搜索过滤器angular 4
json数据自定义搜索过滤器angular 4
提问于 2018-06-06 02:57:14
我想在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"
}
]超文本标记语言代码：
<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;
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-06 06:32:07
如果我没记错的话，这就是你想要实现的目标。
每当我在文本框中输入，如果它与列表中任何数据的名称匹配，那么我就需要显示图像和相应的名称，对吗？
在模板中使用*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>如果要在文本框为空时默认显示所有数据，可以从* is中删除&& searchText.length != 0。
Stack Overflow用户
发布于 2018-06-06 05:30:29
以下内容将帮助您实现相同的目标：
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 })
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50707162
复制相关文章
相似问题