通過多個值過濾對象

Question

我正在創建一個使用Angular 2的Ionic 2的應用程序，並且我遇到了一些障礙。

我的應用程序正在使用geonear命令從API中獲取返回mongo對象的數據。這個對象包含在開放時間和一堆不同的存儲與信息的這樣：

{ 
"_id" : ObjectId("585723490a60e14d8a41ffd3"), 
"storeID" : NumberInt(1110), 
"storeName" : "Kvickly Sundby", 
"chain" : "kvickly", 
"phone" : NumberInt(32860111), 
"openingDates" : [ 
    { 
     "open" : "08.00", 
     "close" : "20.00", 
     "date" : "2016-12-13", 
     "_id" : ObjectId("585723490a60e14d8a41ffef") 
    }, 
    { 
     "open" : "08.00", 
     "close" : "20.00", 
     "date" : "2016-12-14", 
     "_id" : ObjectId("585723490a60e14d8a41ffee") 
    } 
], 
"location" : { 
    "address" : "Englandsvej 28", 
    "city" : "København S", 
    "zip" : NumberInt(2300), 
    "coordinates" : [ 
     12.6048, 
     55.65654 
    ] 
}, 
"__v" : NumberInt(0) 

}

的數據傳遞給我的模板，遍歷並配有摺疊功能的顯示卡以及一個分頁功能。

擷取形成API

getStores(lat, lng) { 
    this.fetchUrl = this.envVar.getEnvUrl() + '?lat=' + lat + '&lng=' + lng; 
    console.log(this.fetchUrl); 
    this.http.get(this.fetchUrl) 
     .map(res => res.json()) 
     .subscribe(data => { 
     this.stores = data; 
     this.loading.dismiss(); 
     this.curPage = 1; 
    }); 
    } 

模板

<accordion> 
     <accordion-group *ngFor="let store of stores | paginate: { itemsPerPage: 15, currentPage: p }; let first = first" [isOpened]="first"> 
      <accordion-heading> 
       <ion-card class="store-card" [style.border-color]="storeColor(store.obj.chain)"> 
        <ion-row> 
         <ion-col width-67> 
          <ion-col> 
           <h2 class="store-name">{{store.obj.storeName}}</h2> 
           <p class="store-location">{{store.obj.location.address}} <br> {{store.obj.location.city}}, {{store.obj.location.zip}}</p> 
           <ion-icon ios="ios-arrow-down" md="ios-arrow-down"></ion-icon> 
          </ion-col> 
         </ion-col> 
         <ion-col width-33> 
          <ion-col width-100 *ngFor="let date of store.obj.openingDates | where : {date : today}" class="opening-hours"><p>{{date.open}} - {{date.close}}</p></ion-col> 
          <ion-col width-100 class="distance"> 
           <p>{{store.dis | formatDistance}} <ion-icon name="pin"></ion-icon></p> 
           <p><a target="_blank" href="http://www.google.com/maps/place/{{store.obj.chain}} {{store.obj.location.address}}, {{store.obj.location.zip}} {{store.obj.location.city}}">Rutevejledning</a></p> 
          </ion-col> 
         </ion-col> 
        </ion-row> 
       </ion-card> 
      </accordion-heading> 
      <div class="extra-info"> 
       <ion-grid> 
        <ion-row> 
         <ion-col width-100> 
          <p class="week">Uge {{weekNumber}}</p> 
         </ion-col> 
        </ion-row> 
        <ion-row width-100 *ngFor="let date of store.obj.openingDates | afterWhere: {date: tomorrow} | slice:0:leftInWeek"> 
         <ion-col width-50 class="weekday">{{date.date | date: "EEEE, d MMMM"}}</ion-col> 
         <ion-col width-50 class="hours">{{date.open}} - {{date.close}}</ion-col> 
        </ion-row> 
       </ion-grid> 
      </div> 
     </accordion-group> 
    </accordion> 

這一切工作正常，但我則希望做的是能夠通過「產業鏈」屬性的對象來過濾結果所以我只得到一些連鎖店（沃爾瑪，好市多等）

我只是不知道該如何處理。在離子提供導航我有撥動開關的不同鏈（它們是硬編碼的，不用擔心），我想使用的過濾集合：

導航切換

<ion-content> 
<ion-item> 
    <ion-label>Chain 1</ion-label> 
    <ion-toggle></ion-toggle> 
</ion-item> 

<ion-item> 
    <ion-label>Chain 2</ion-label> 
    <ion-toggle></ion-toggle> 
</ion-item> 

<ion-item> 
    <ion-label>Chain 3</ion-label> 
    <ion-toggle></ion-toggle> 
</ion-item> 

最初我希望能夠使用filterBy在ng-pipes的Angular 2版本中，但filterBy將只接受一個值來過濾，因此在我的場景中並不是非常有用。

那麼這裏最好的選擇是什麼？某種自定義過濾器管道？並且我是否在最終對象中排序，或者是否將一些參數傳遞給API，並在數據發回之前進行限制？

這一切都有點混亂，這是我的第一個角的項目，所以我真的很感激一些指導如何，我會做到這一點（在儘可能最好的方式）

Answer 1

我想先解決這個問題，像你提到的那樣，查詢API。我不確定數據的規模是什麼，但將過濾添加到您的API會使您的應用程序的規模更有效。

如果你不想走那條路線，那麼我會看管道。它們是瞭解如何使用和創建的非常有用的工具。

https://angular.io/docs/ts/latest/guide/pipes.html

的角2頁的文檔具有關於如何創建一個管的導向。查看飛行英雄管部分。有它here.

模板

<div *ngFor="let hero of (heroes | flyingHeroes)"> 
    {{hero.name}} 
</div> 

管

import { Pipe, PipeTransform } from '@angular/core'; 
import { Flyer } from './heroes'; 

@Pipe({ name: 'flyingHeroes' }) 
export class FlyingHeroesPipe implements PipeTransform { 
    transform(allHeroes: Flyer[]) { 
    return allHeroes.filter(hero => hero.canFly); 
    } 
} 

一旦您創建的管道，你可以將數據無論如何要在變換方法plunkr。在他們的例子中，他們使用過濾功能，只返回canFly的英雄。你的情況，你可以像更換.canFly檢查：

let wantedChains = ['Costco', 'Walmart', 'etc...'] 
transform(stores: Store[]) { 
    return stores.filter(store => (wantedChaines.indexOf(store.chain) > -1)); 
}