Question

我有一个表，列出了从json文件中提取的数据。我想用下拉列表过滤数据。例如，我想列出价格在0-1000之间的房子，或者家的位置是'Çekmeköy'。

我添加了下拉列表，我给了ng-model="search"属性。然后我尝试了*ngFor="let ihome of homes | filter: search"中的过滤器选项（我也尝试过ng-repeat），但它没有用。

那么，如何使用下拉列表过滤数据？有什么建议吗？

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端

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

Answer 1

您展示ng-model和filter的语法是angularjs语法，您需要使用 [(ngModel)] 与 pipe 进行过滤angular6。

Answer 2

您可以使用 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
  }
}

在模板中你有下拉列表

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

详细了解角管 here。

Answer 3

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!

如何使用Angular 6中的下拉列表过滤json数据？

3 个答案: