Ionic 2 Pipe 需要来自数据库的数据——这怎么可能？答案

【问题标题】：Ionic 2 Pipe requires data from database - how is this possible?Ionic 2 Pipe 需要来自数据库的数据——这怎么可能？
【发布时间】：2017-03-29 03:02:43
【问题描述】：

我正在尝试在 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 项显示在我的 ion-list 中，因为设置 JSON 将软件和类别的 onOffState 设置为 1。但是，目前，我的数组中没有任何内容显示在前端。

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

【问题讨论】：

您是否希望这种情况经常发生变化？访问组件中的数据库并通过将softwareCategoryStates 传递给管道来使管道变得纯净可能会更容易。另外，您还没有说明您发布的代码中发生了什么。
我曾尝试将数据库 JSON 作为管道的参数传递，但在数据库完成收集和返回数据之前，我似乎在尝试评估 *ngFor 迭代器时遇到了麻烦。更新数据库对象参数时，*ngFor 过滤器是否应该自行更新？
newsData 是否也来自可观察对象？在这种情况下，使用例如forkJoin 并行运行这两个并收集两组结果 - 然后您可以在知道您还拥有从数据库中获取的任何内容时将 newsData 设置为 *ngFor。
我没有在我的代码中使用 Observable 类。那么这会有帮助吗？
哦，对了。您能否就您正在做的事情提供更多背景信息？你循环的数据来自哪里？请edit 提供更多minimal reproducible example。

标签： angular ionic-framework pipe ionic2

【解决方案1】：

你需要实现一个异步管道

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

异步管道将适应从数据库获取数据的延迟。

【讨论】：

你有任何粗略的例子来说明如何使用异步管道编写代码吗？我正在努力理解语法以及应该如何编写它们。
不抱歉，还没有必要在 Angular2 中编写一个

【解决方案2】：

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

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

【讨论】：