Angular4/AngularFire2：从管道中查询 firebase？

Question

是否可以从管道内查询 Firebase 数据库和 return 一个值？

我有以下HTML

<div *ngFor="let item of items">
    <h2>
        {{item.firstName}} {{item.middleName}} {{item.lastName}}
    </h2>

    <div *ngFor="let lifeItem of (item.$key | event: 'life')">
        Born: {{lifeItem.start}}
    </div>
</div>

以及以下管道：

import { Pipe, PipeTransform } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Pipe({ 
    name: 'event'
})

export class EventPipe implements PipeTransform {
    subscriptions: Array<any> = new Array<any>();
    items: Array<any> = new Array<any>();
    constructor(
        protected db: AngularFireDatabase
    ){}

    public transform(personId: any, eventType: any) { 
        if (!personId || !eventType) return [];  

        console.info("personId: " + personId);
        console.info("eventType: " + eventType);

        this.subscriptions.push(
            this.db.list('/event', {
                query: {
                    limitToLast: 200
                }
            }).subscribe(items => {
                console.info(items);
                this.items = items;
                return this.items;
            })
        );

    }
}

当我运行这个时，我在控制台中得到这个...

...但页面相应部分未呈现任何内容。

Answer 1

我的猜测是，由于数据库调用是异步操作，因此您必须考虑数据可用之前的延迟。在抓取 .items

之前尝试使用异步管道作为辅助管道并进行空检查

像这样：*ngFor="let lifeItem of (item.$key | event: 'life' | async)?.items"

注意：我自己没有测试过这段代码。提个建议。

Answer 2

我认为，最好使用 Angular AsyncPipe

export class EventPipe implements PipeTransform {
    constructor(protected db: AngularFireDatabase){}

    public transform(personId: any, eventType: any) { 
        if (!personId || !eventType) return Observable.of([]);
        return this.db.list('/event', {
            query: {
                limitToLast: 200
            }
        });
    }
}

<div *ngFor="let lifeItem of (item.$key | event: 'life' | async)">
    Born: {{lifeItem.start}}
</div>

Angular4/AngularFire2：从管道中查询 firebase？

Angular4 / AngularFire2: Querying firebase from within a pipe?

angularfire2

angular-pipe

angular