Question

我正在使用带有Angular 2的Ionic 2创建应用程序，我遇到了一些麻烦。

我的应用程序从使用geonear命令返回mongo对象的API获取数据。这个对象包含一堆不同的商店，其中包含营业时间信息等：

{ 
"_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>

这一切都运行正常，但我希望能够通过对象中的“链”属性过滤结果，这样我才能获得一些链（沃尔玛，好市多等）

我只是不确定如何处理这个问题。在Ionic提供的导航中，我有一组用于不同链的切换开关（它们是硬编码的，不用担心）我想用于过滤：

导航切换

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

最初我希望在Angular 2版本的ng-pipes中使用类似filterBy的东西，但filterBy只接受一个值来过滤，因此在我的场景中并不是真的非常有用。

那么这里最好的选择是什么？某种自定义过滤管？我在最终对象中排序还是在将数据发回之前将一些参数传递给api并限制？

这有点令人困惑，这是我的第一个Angular项目，所以我真的很感谢我会如何做到这一点（以最好的方式）

Answer 1

我会像你提到的那样，通过查询API来解决这个问题。我不确定您的数据规模是多少，但是将过滤添加到API可以使您的应用程序在规模上更加高效。

如果你不想走这条路，我会看管道。它们是了解如何使用和创建的非常有用的工具。

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

angular 2 docs有关于如何创建管道的指南。查看 Flying Heroes pipe 部分。它有一个plunkr 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);
  }
}

创建管道后，您可以在transform方法中随意转换数据。在他们的例子中，他们使用过滤功能，只返回canFly的英雄。在您的情况下，您可以使用以下内容替换 .canFly 检查：

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

按多个值

1 个答案: