Я пытаюсь использовать пользовательскую трубку в Angular 2 для моего проекта Ionic 2 (RC 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) для запуска двух параллельно и сбора обоих наборов результатов - тогда вы можете установить 'newsData' для' * ngFor' в то время, когда вы знаете, что у вас есть все, что вы получаете от базы данных. – jonrsharpe