Question

我正在尝试在Angular 2中使用自定义管道用于我的Ionic 2（RC 2）项目，但我无法弄清楚它应该如何编写。我最大的问题是管道依赖于数据库中的数据来确定过滤器是应该返回true还是false。

newsData数组：

[
  {
    "id": 0,
    "softwareName": 0,
    "categoryName": 0,
    "title": "Notification Title",
    "description": "Shoft description for notifications",
    "date": "2016-01-05 16:23:23"
  }
]

设置getCategoriesForAllSoftware（）返回的JSON：

[
    {
        categories: [
            {
                categoryId: 0,
                categoryName: "category1",
                onOffState: 1
            },
            {
                ...
            }
        ],
        onOffState: 1,
        softwareId: 0,
        softwareName: "software1"
    },  
    {
        ...
    }
]

以下是我的管道代码：

import {Pipe, PipeTransform}               from '@angular/core';
import {Platform}                          from 'ionic-angular';
import {DatabaseService}                   from '../providers/database/init';
import {GlobalFunctions}                   from '../providers/globalFunctions';

@Pipe({name: 'notificationSettings'})
export class NotificationSettingsPipe implements PipeTransform {

constructor(
    public databaseService: DatabaseService,
    public globalFunctions: GlobalFunctions,
    public platform: Platform
) {}

transform(cards: Array<Object>) {
    this.platform.ready().then((readySource) => {
        return this.databaseService.getCategoriesForAllSoftware().then((data) => {
            var softwareCategoryStates = this.globalFunctions.generateSoftwareCategoriesArray(data);
            return cards.filter((card) => this.cardFilter(card, softwareCategoryStates));
        }, (error) => {
            console.error("Error in Pipe: ", error);
        });
    });
}

cardFilter(card, softwareNots) {
    var flag = true;
    for (var i=0; i<softwareNots.length; i++) {
        if (card.softwareName == softwareNots[i]['softwareName']) {
            console.debug("SOFTWARENOTS[I]", softwareNots[i]);
            if (softwareNots[i]['onOffState'] == 0) {
                flag = false;
            } else {
                var notificationTypes = softwareNots[i]['categories'];
                for (var j=0; j<notificationTypes.length; j++) {
                    if (card.categoryName == notificationTypes[j]['categoryName']) {
                        console.debug("NOTIFICATIONTYPES[J]", notificationTypes[j]);
                        if (notificationTypes[j]['onOffState'] == 0) {
                            flag = false;
                        }
                    }
                }
            }
        }
    }
    return flag;
}
}

这是应在我的视图文件中显示已过滤列表项的代码

<div *ngFor="let card of (newsData | notificationSettings)">
  <ion-card>
    <ion-item>
      <ion-icon name="{{card.icon}}" item-right></ion-icon>
      <ion-avatar item-left>
        <p class="product {{card.softwareName}}"></p>
      </ion-avatar>
      <h2>{{card.title}}</h2>
      <p class="publish-date">{{card.date | date:'d MMM'}}</p>
    </ion-item>
  </ion-card>
</div>

在上面的代码中，我希望newsData项目显示在我的离子列表中，因为设置JSON将onOffState设置为1，用于软件和类别。但是，目前我的阵列中没有任何内容显示在前端。

我可能会尝试从数据库中访问信息，但我的问题似乎是在平台准备就绪并且数据库已返回JSON数据后尝试使用过滤器。

Answer 1

您需要实现异步管道

https://angular.io/docs/ts/latest/guide/pipes.html#!#async-pipe

异步管道将容纳从数据库获取数据的延迟。

Answer 2

我已经解决了我的问题但我是通过更改数据库查询而不是使用管道来解决的。不幸的是，这并没有解决我提出的问题，但我找到了一个解决方法来完成我需要的工作。

我的数据库查询现在使用WHERE子句过滤掉我不想显示的数据。

Ionic 2 Pipe需要数据库中的数据 - 这怎么可能？

2 个答案: