Question

我使用AngularFire2从Firebase数据库中获取数据（实时）。

我做了什么：

Firebase数据库

{ “class”：{ “学生”：{ “汤姆”：“男性”， “玛丽”：“女性”， “彼得”：“男性”， “劳拉”：“女性” }，＆＃34; 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：

＆＃13;

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

＆＃13;

发生了什么：

班级人数：10
     汤姆：

玛丽：
     彼得：
     劳拉：

它不会返回列表的值。

任何建议都表示赞赏。

Answer 1

<强> 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
    });
  }));

Answer 2

自@ rickdroio回答以来，AngularFire2库经历了一些重大变化。以下是解决方案的更新版本：

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 };
  });
});

Answer 3

我设法获得了列表的关键和价值。请按照以下提示进行操作：

确保使用snapshotChanges（）

n_neighbors

它对我有用，但我仍然愿意接受更多最佳实践

Answer 4

根据https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md提供的指南，您可以执行以下操作：

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

它会像之前的Firebase数据库一样返回一个类似的数组。

Answer 5

你的问题是你的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

Answer 6

使用 Angular 6
细目：

我创建了一个Map，用于存储键/值以供将来查询。
获取值并将其添加到先前创建的Map
创建了两个帮助方法来分别获取键或值。

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;
  }
  ...

Answer 7

我已经尝试了以上所有方法，但是直到Angular 6都对我没有作用

   const m = this.firestore.collection("class/student").snapshotChanges();
    m.subscribe(res =>{
      console.log(res)
      res.forEach(res => {
        const value = res.payload.doc.data();
        const id = res.payload.doc.id;
        console.log(value," ",id)
      });
    })

许多角度射击方法已经过时了。关键在于vs代码建议，将来如果这样做不起作用，则必须类似地探索提供的内容。暂时

res.payload.doc.data()
res.payload.id

会工作的。

AngularFire2：实时数据库：如何获取密钥和值

7 个答案: