0

I've got a problem. I have a list of cities, but when I use the search-bar, I just want the cities with the same name to appear.

Currently i'm trying this:

   <ion-searchbar
      [(ngModel)]="selectedCity"
      [showCancelButton]="shouldShowCancel"
      (ionCancel)="onCancel($event)">
    </ion-searchbar>

  <ion-item *ngFor="let city of cities | orderBy: name | filter: selectedCity">
          <ion-label>{{city.name}}</ion-label>
    <button (click)="onActive(city.detalhe.id)" *ngIf="city.active" ion-button outline item-right>Desativar</button>
    <button (click)="onActive(city.detalhe.id)" *ngIf="!city.active" ion-button outline item-right>Ativar</button>
        </ion-item>

But I know it will never works 'cause i'm sending the object city to the pipe 'filter' and not the name, how can I send just the name for the pipe? I need the object for the method 'onActive'

The Pipe:

@Pipe({
name: "filter",
pure: false
})

export class FilterArrayPipe implements PipeTransform {

transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> {
    return items.filter(item => {
        for (let field in conditions) {
            if (item[field] !== conditions[field]) {
                return false;
            }
        }
        return true;
    });
}
}

And 'selectedCity' is a String. When I try the pipe out with others strings, It works. Another point, I need to filter comparing the name of the object but I need the whole object after this.

Christian Benseler
  • 7,907
  • 8
  • 40
  • 71
Ygor Fraga
  • 143
  • 1
  • 1
  • 10

1 Answers1

1

Well to begin with it looks like you'd need to send 2 parameters to the filter. The first being the literal 'name', the second selectedCity unquoted in the *ngFor of <ion-item>. Then you could filter by items[field] !== selectedCity - where field would contain 'name'

I take it you've got the orderBy Example from here

You did see the comments below in the order by example link too... avoid using pipes for orderby.. Do it in components. I would address doing both at the component level personally.

JGFMK
  • 8,425
  • 4
  • 58
  • 92