web-dev-qa-db-ja.com

AngularFire2：リアルタイムデータベース：キーと値を取得する方法

AngularFire2を使用して、Firebase Database（リアルタイム）からデータを取得します。

私がやった事：

  • Firebaseデータベース

{「クラス」：{「学生」：{「トム」：「男性」、「メアリー」：「女性」、「ピーター」：「男性」、「ローラ」：「女性」}、「numberOfStudent」：10} }

  • app.component.ts

    import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

...
export class AppComponent {

   class: Observable<any>;
   students: Observable<any[]>;

constructor(private db: AngularFireDatabase) {
   this.class = db.object(‘class’).valueChanges();
   this.students = db.list(‘class/student’).snapshotChanges();
 }

}

  • app.component.html：

<h2>Class size: {{ (class | async)?.numberOfStudent }}</h2>
<ul>
  <li *ngFor="let i of students | async">
    {{i.key}} : {{i.value}}
  </li>
</ul>

どうした：

クラスサイズ：10

トム：

メアリー：

ピーター：

ローラ ：

Listの値を返しません。

どんな提案も大歓迎です。

angularfirebaseangularfire2real-time-data
8
Phong Vu

[〜＃〜] upd [〜＃〜]

新しいAngular 6およびRxJS 6を使用すると、次のようになります。

import { map } from 'rxjs/operators';
// ...
return this.fb.list(`/path/to/list`)
  .snapshotChanges()
  .pipe(map(items => { .            // <== new way of chaining
    return items.map(a => {
      const data = a.payload.val();
      const key = a.payload.key;
      return {key, data};           // or {key, ...data} in case data is Obj
    });
  }));
9
Matiishyn

AngularFire2ライブラリは、@ rickdroioの回答以降、いくつかの重大な変更を経ています。以下は、ソリューションの更新バージョンです。

afs.collection<Shirt>('class/student').snapshotChanges().map(actions => {
  return actions.map(a => {
    const data = a.payload.val();
    const id = a.payload.id;
    return { id, ...data };
  });
});
7
user9021566

リストのキーと値を取得できました。以下のヒントに従ってください。

  • 必ずsnapshotChanges（）を使用してください
<li *ngFor="let i of seats | async">
    {{i.key}} : {{i.payload.val()}}
</li>

それは私のために働いたが、私はまだより多くのベストプラクティスを受け取るために開いています

3
Phong Vu

あなたの問題はJSONオブジェクトの学生が配列ではなく、それをループしようとしていることです。

    "student" : { “Tom” : “male”, “Mary” : “female”, “Peter” : “male”, “Laura” :
“female” }, "numberOfStudent” : 10 }

生徒をループさせるには、生徒をリストまたはオブジェクトにする必要があります。

   "student" :
[ { "name" : "Tom", "sex" : male}, {"name" : "Mary, "sex" : "female" }, ... ]

let i of student | asyncをループし、名前と性別にアクセスi?.name、i?.sex

1
FussinHussin

Angular 6で
壊す：

  1. 今後のクエリのためにキー/値を保存するマップを作成しました。

  2. 値を取得し、以前に作成したマップに追加しました

  3. キーまたは値を個別に取得する2つのヘルパーメソッドを作成しました。

todosKeyValues: Map<string, Todo> = new Map();

constructor(private databaseFB: AngularFireDatabase) {
    this.fetchKeyValues();
 }

private fetchKeyValues() {
    this.databaseFB.list('/').snapshotChanges().subscribe(actions => {
      actions.forEach(action => {
        const value = action.payload.val();
        const id = action.payload.key;
        this.todosKeyValues.set(id, value);
      });
    });
  }


 private getKey(id: number): string {
 const foundEntry = Array.from(this.todosKeyValues.entries())
    .filter(entry =>entry[1].id === id).pop();
   return foundEntry ? foundEntry[0] : undefined;
  }

  private getTodo(id: number): Todo {
    const foundEntry = Array.from(this.todosKeyValues.entries())
    .filter(entry => entry[1].id === id).pop();
      //index 0 is the key, index 1 is the value
    return foundEntry ? foundEntry[1] : undefined;
  }
  ...
1
Jorciney