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

Question

是否可以 - 从管道内 - 查询Firebase数据库并返回值？

我有以下的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

我认为，这是更好地使用角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> 

Answer 2

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

像这样抓.items之前异步管作为二级管和空检查：*ngFor="let lifeItem of (item.$key | event: 'life' | async)?.items"

注：我没有测试此代码自己。只是提出建议。