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

Question

我使用AngularFire2从Firebase数据库中获取数据(实时).

我做了什么:

• Firebase数据库

{"class":{"student":{"Tom":"male","Mary":"female","Peter":"male","Laura":"female"},"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的值.

任何建议表示赞赏.

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()

<li *ngFor="let i of seats | async">
    {{i.key}} : {{i.payload.val()}}
</li>

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

Answer 4

你的问题是你的 JSON 对象 Students 不是一个数组，并且你试图循环它。

\n\n

    "student" : { \xe2\x80\x9cTom\xe2\x80\x9d : \xe2\x80\x9cmale\xe2\x80\x9d, \xe2\x80\x9cMary\xe2\x80\x9d : \xe2\x80\x9cfemale\xe2\x80\x9d, \xe2\x80\x9cPeter\xe2\x80\x9d : \xe2\x80\x9cmale\xe2\x80\x9d, \xe2\x80\x9cLaura\xe2\x80\x9d :\n\xe2\x80\x9cfemale\xe2\x80\x9d }, "numberOfStudent\xe2\x80\x9d : 10 }\n

\n\n

您需要为学生提供一个对象列表以便循环遍历它们，如下所示：

\n\n

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

\n\n

循环通过let i of student | async\n 并访问姓名和性别\n i?.name，i?.sex

\n