0
我想在我的离子2（RC 2）项目中使用Angular 2中的自定义管道，但我无法弄清楚它应该如何写入。我最大的问题是管道依靠数据库中的数据来确定过滤器是否返回true或false。Ionic 2 Pipe需要数据库中的数据 - 这怎么可能？
newsData阵列：
[
{
"id": 0,
"softwareName": 0,
"categoryName": 0,
"title": "Notification Title",
"description": "Shoft description for notifications",
"date": "2016-01-05 16:23:23"
}
]
设置JSON由getCategoriesForAllSoftware（）返回：
[
{
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数据后尝试使用过滤器。
您是否期望经常更改？访问组件中的数据库可能更容易，并通过将'softwareCategoryStates'传递给它来使管道变得纯净。此外，你还没有说过你发布的代码会发生什么。 – jonrsharpe
我曾尝试传入数据库JSON作为管道的参数，但我似乎在试图在数据库完成收集和返回数据之前试图评估* ngFor迭代器的问题上挣扎。在数据库对象参数更新时，* ngFor过滤器是否应该自行更新？ –
'newsData'是否也来自可观察对象？在那种情况下，使用例如['forkJoin']（https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/forkjoin.md）并行运行并收集两组结果 - 然后你可以在你知道自己拥有数据库的任何东西的时候为'* ngFor'设置'newsData'。 – jonrsharpe