Angular4/AngularFire2：パイプ内のファイアベースを照会していますか？

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

DB呼び出しが非同期操作であるため、データが利用可能になるまでの遅延を考慮する必要があります。 *ngFor="let lifeItem of (item.$key | event: 'life' | async)?.items"

注：私はこのコードを自分でテストしていませんでしたつかん.items前に、このような

何かを二パイプとヌル・チェックなどの非同期パイプを使用してみてください。ちょうど提案をしてください。