typescript 如何使用 Angular 6 中的下拉列表过滤 json 数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50674034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to filter json data with dropdown in Angular 6?
提问by Mevlüt Soner
I have a table that lists data extracted from a json file. I want to filtering the data with dropdown. For example, i would like to list houses with prices between 0-1000 or home location is ' ?ekmek?y ' .
我有一个表，列出了从 json 文件中提取的数据。我想用下拉菜单过滤数据。例如，我想列出价格在 0-1000 之间的房屋，或者家庭位置是 '?ekmek?y' 。
I added dropdown and i gave the ng-model="search"property. Then i tried the filter options in *ngFor="let ihome of homes | filter: search"( i also tried ng-repeat ) but it didn't work.
我添加了下拉菜单，并给出了ng-model="search"属性。然后我尝试了过滤器选项*ngFor="let ihome of homes | filter: search"（我也尝试过 ng-repeat ）但它没有用。
So, How to filter data with dropdown ? Any suggestion ?
那么，如何使用下拉菜单过滤数据？有什么建议吗？
Json Data :
JSON 数据：
{
"home_id":1,
"home_imgUrl":"https://cdn.evtiko.com/images/houses/4/thumbnail/4_1513963370_1eda5d1aa440483bb8c468002c9bc50c.jpg",
"home_location":"?ekmek?y, ?stanbul",
"home_name": "R?nesans Sayfiye Sitesi",
"home_numberOfRoom":"2+1",
"home_size":"162m2",
"home_floor":"1",
"home_price":"476.000 ?"
},
{
"home_id":2,
"home_imgUrl":"https://cdn.evtiko.com/images/houses/46/thumbnail/46_1526625393_93094fadc76a45628621d2c1d579eda4.jpg",
"home_location":"Kad?k?y, ?stanbul",
"home_name": "R?nesans Sayfiye Sitesi",
"home_numberOfRoom":"2+1",
"home_size":"162m2",
"home_floor":"1",
"home_price":"375.000 ?"
},
{
"home_id":3,
"home_imgUrl":"https://cdn.evtiko.com/images/houses/8/thumbnail/8_1513963370_f72f2854b9404cc7befc7b4e6f3832d5.jpg",
"home_location":"ümraniye, ?stanbul",
"home_name": "R?nesans Sayfiye Sitesi",
"home_numberOfRoom":"2+1",
"home_size":"162m2",
"home_floor":"1",
"home_price":"576.000 ?"
},
{
"home_id":4,
"home_imgUrl":"https://cdn.evtiko.com/images/houses/9/thumbnail/9_1513963370_d58d51026b9b446caec4792c6e720ead.jpg",
"home_location":"?ekmek?y, ?stanbul",
"home_name": "R?nesans Sayfiye Sitesi",
"home_numberOfRoom":"2+1",
"home_size":"162m2",
"home_floor":"1",
"home_price":"276.000 ?"
}
HTML Side
HTML端
<div class="row">
<div *ngFor="let ihome of homes" class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="{{ihome.home_imgUrl}}" style="height: 480; width: 720; display: block;">
<div class="card-body">
<p class="card-text homeLocation">{{ihome.home_location}}</p>
<p class="card-text homeName">{{ihome.home_name}}</p>
<P class="card-tex price">{{ihome.home_price}}</P>
<div class="d-flex justify-content-between align-items-center labelBorder">
<div class="labelModify">
<img src="https://cdn.evtiko.com/images/oda-sayisi.svg"> <span class="labelModify">{{ihome.home_numberOfRoom}}</span>
<img src="https://cdn.evtiko.com/images/metrekare.svg"> <span class="labelModify">{{ihome.home_size}}</span>
<img src="https://cdn.evtiko.com/images/kat-sayisi.svg"> <span class="labelModify">{{ihome.home_floor}}</span>
</div>
</div>
</div>
</div>
采纳答案by Anuradha Gunasekara
You can use a Angular custom pipefor this.
您可以为此使用Angular 自定义管道。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'yourPipeName' })
export class YourPipeName implements PipeTransform {
transform(data: any[], max: number) { // replace the any with your interface for data.
return data.filter(home => (home.home_price > max)); change the condition as you need
}
}
And the in the template where you have the dropdown
并且在您有下拉菜单的模板中
<input [(ngModel)]="max"> // bind the max carible for ngModel to get the max value(max price)
<div *ngFor="let ihome of homes | yourPipeName: max">
</div>
Read more about Angular pipeshere.
在此处阅读有关Angular 管道的更多信息。
回答by Sajeetharan
The syntax you showed ng-model and filter are angularjs syntaxes, you need to use [(ngModel)]with pipeto do the filtering with angular6.
您显示的 ng-model 和 filter 语法是 angularjs 语法，您需要使用[(ngModel)]withpipe来使用 angular6 进行过滤。
回答by mittal bhatt
try using pipe like below
Search by multiple fields
Assuming data:
items = [
{
id: 1,
text: 'First item'
},
{
id: 2,
text: 'Second item'
},
{
id: 3,
text: 'Third item'
}
];
Markup:
<input [(ngModel)]="query">
<div *ngFor="let item of items | search:'id,text':query">{{item.text}}</div>
Pipe:
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
public transform(value, keys: string, term: string) {
if (!term) return value;
return (value || []).filter((item) => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));}}
One line for everything!
