Как отфильтровать данные JSON с выпадающим в Angular 6?

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

Для этого можно использовать Угловую пользовательскую трубу .

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>

Узнайте больше о Угловые трубы здесь .

Answer 2

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!

Answer 3

Синтаксис, который вы показали, ng-model и filter - это синтаксис angularjs, вам нужно использовать [(ngModel)] с pipe, чтобы выполнить фильтрацию с angular6.