2017-07-07 33 views
0

我有一個問題。我有一個城市列表,但是當我使用搜索欄時,我只想讓同名的城市出現。如何過濾Ionic 2上的對象名稱?

目前,我想要這個:

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

但我知道它永遠不會工作「,因爲我送的對象城市管道‘過濾器’,而不是名字,我怎麼可以只發送管道的名稱?我需要方法的對象 'onActive'

管道:

@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; 
    }); 
} 
} 

而 'selectedCity' 是一個字符串。當我用其他字符串嘗試管道時,它工作。還有一點,我需要過濾比較對象的名稱,但在此之後我需要整個對象。

回答

1

好吧,看起來你需要發送2 parameters到過濾器。第一個是文字'名稱',第二個選定城市在* ngFor中加上< ion-item >。 然後,你可以通過項目[現場]過濾== selectedCity - where字段將包含「名稱」

我想你已經從here

得到了排序依據實例你沒看到下面的評論中通過示例鏈接也是如此...避免使用管道進行orderby ..在組件中執行。我會在組件級別上親自解決這兩個問題。

+0

你可以編輯管道嗎?我不知道如何去做。 –

+0

使用VSCode之類的IDE https://code.visualstudio.com/ – JGFMK