Mam tabelę, która wymieniono dane wyodrębnione z pliku JSON. Chcę filtrować dane z rozwijaną. Na przykład, chciałbym wymienić domy z cenami między 0-1000 lub lokalizacji domowej, jest "çekmeköy".

Dodałem rozwijaną nieruchomość i dałem ng-model="search". Następnie wypróbowałem opcje filtrów w *ngFor="let ihome of homes | filter: search" (Próbowałem również ng-powtórz), ale nie działa.

Jak filtrować dane z rozwijaną? Jakieś sugestie ?

JSON Data:

 {
        "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 ₺"
    }

strona 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>
0
Mevlüt Soner 4 czerwiec 2018, 08:44

3 odpowiedzi

Najlepsza odpowiedź

Możesz użyć kątowej rury niestandardowej dla tego.

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

I w szablonie, w którym masz rozwijaną

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

Czytaj więcej o Kątowe Rury Oto.

0
halfer 31 sierpień 2018, 23:59

Składnia, którą pokazałeś NG-Model i Filter to składnia Angularjs, należy użyć [(ngModel)] z pipe , aby wykonać filtrowanie z kątem6.

0
Sajeetharan 4 czerwiec 2018, 05:47
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!
0
mittal bhatt 4 czerwiec 2018, 05:56