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