2017-01-26 5 views
3

私はこれが私の構造体である角度の2AngularFire 2でキーの値を取得する方法は?

でAngularFireを使用して一意のキーの値を取得して問題を抱えている:

enter image description here

あなたが見ることができるように、報告書は一意キーの魔女値を持っていますその中。私は簡単に*ngForを使用してそれらの値を得ることができますが、私が欲しかったのはユニークなキーの値を取得することです。

import { AngularFire, FirebaseListObservable} from 'angularfire2'; 

export class MapsComponent implements OnInit { 
    item: FirebaseListObservable<any[]>; 
    constructor(private af: AngularFire) { 
    this.item = af.database.list('/reports/-Ka2fkQJ3krtBztMtiRD') 
    } 
    ngOnInit() { 
    } 
} 

HTML::あなたが見ることができるように

<md-card> 
    <md-card-title>Report</md-card-title> 
    <md-card-content> 
    {{item.plateNumber}} 
    </md-card-content> 
</md-card> 

が、私はキー-Ka2fkQJ3krtBztMtiRDので、私がやったことaf.database.list('/reports/-Ka2fkQJ3krtBztMtiRD')ある内の値を取得したいこれは私のコードです。私は何も得ず、誤りもない。

ここに何か不足していますか?どんな助けでも大歓迎です。

答えて

4

あなたは、単一のオブジェクトではなく、リストを参照するに観察したい場合は、FirebaseObjectObservableを使用する必要があります。

import { AngularFire, FirebaseObjectObservable } from 'angularfire2'; 
... 
export class MapsComponent implements OnInit { 
    item: FirebaseObjectObservable<any>; 
    constructor(private af: AngularFire) { 
    this.item = af.database.object('/reports/-Ka2fkQJ3krtBztMtiRD'); 
    } 
    ngOnInit() { 
    } 
} 

そして、あなたのテンプレートは、このようなものになるだろう:

<md-card> 
    <md-card-title>Report</md-card-title> 
    <md-card-content> 
    {{(item | async)?.plateNumber}} 
    </md-card-content> 
</md-card> 

テンプレート全体にitem | async個の表現を振りかざすことに懸念がある場合は、ngIf's support for local variables

<md-card *ngIf="item | async; let i"> 
    <md-card-title>Report</md-card-title> 
    <md-card-content> 
    {{i.plateNumber}} 
    </md-card-content> 
</md-card> 
関連する問題