Angular4/AngularFire2：從管道內查詢firebase？

是否可以 - 從管道內 - 查詢Firebase數據庫並返回值？Angular4/AngularFire2：從管道內查詢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; 
      }) 
     ); 

    } 
}

當我運行它，我得到這個在控制檯...

...但沒有任何東西在頁面上的相應部分呈現。

來源

2017-08-20 eat-sleep-code

我認爲，這是更好地使用角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>

來源

2017-08-20 17:17:58

你從哪裏得到'Observable'？我嘗試從'rxjs/Observable'中導入{Observable};'然後它說'''的'屬性'不存在'typeof Observable' –

'從'rxjs/Observable'導入{Observable};'和'import' rxjs/add/observable/of';' –

是否有可能進一步過濾管道內的項目。我有這個： 'if（！personId ||！type）return Observable.of（[]）; \t \t令輸出= this.db.list（ '/事件'，{ 查詢：{ \t \t \t \t orderByChild： '人'， \t \t \t \t equalTo：PERSONID } \t \t}）; \t \t return output;'是否有可能進一步過濾「輸出」，以便它只包含與事件類型匹配的項目？ –

我的猜測是，由於數據庫調用是異步操作，因此您必須在數據可用之前考慮延遲。嘗試使用

像這樣抓.items之前異步管作爲二級管和空檢查：*ngFor="let lifeItem of (item.$key | event: 'life' | async)?.items"

注：我沒有測試此代碼自己。只是提出建議。

來源

2017-08-20 17:16:06 nGAGE

嘗試這個。我不再犯錯誤，也得不到任何數據。 :-) –

@ eat-sleep-code你有沒有改變你的ngFor在最後排除'.items'？我是否明白你現在正在獲取數據？ – nGAGE

Angular4/AngularFire2：從管道內查詢firebase？

回答

相關問題