从 firebase 获取数据

Question

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  courses;

  constructor(db: AngularFireDatabase) {
    db.list('/courses').valueChanges()
      .subscribe(courses => {
        this.courses = courses;
        console.log(this.courses);
      });
  }
}

预期行为： [对象，对象，对象，对象]

实际行为： ["course 1", "course 2", {...}, {...}]

上面的代码 returns 一个数组，但我期望的是一个对象数组。同样是返回的类型，但 valueChanges() 是 Observable<{}[]>。我想知道它是 valueChanges() 的正常行为，即返回一个 Observable 作为对象和一个数组。请帮助我并告诉我我的代码哪里错了。我想要一个对象数组作为这段代码的最终结果。

Answer 1

来自https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md

valueChanges()

What is it? - Returns an Observable of data as a synchronized array of JSON objects. All Snapshot metadata is stripped and just the method provides only the data.

所以你得到的不是 [{ key: value }]，而是 [value]。

如果您想要完整的对象，包括键，请使用 snapshotChanges()。
为此，您还需要从 rxjs/operators 导入 map。

import { map } from "rxjs/operators";

db.list('/courses').snapshotChanges()
  .pipe(map(snapshots => {
    return snapshots.map(snapshot => {
      let course = {};
      course[snapshot.key] = snapshot.payload.val();
      return course;
    });
  })).subscribe(courses => {
    this.courses = courses;
    console.log(this.courses);
  });

这将 return 具有结构 [{ key: value }] 的用户数组。如果您想要不同的格式，例如 [{ "key": key, "value": value }]，请告诉我，我会更新我的答案。

Answer 2

回答你的问题：是的，这是正常行为。

由于 Firebase 是一个实时数据库，它希望跟踪您查询的任何路径并查看它是否发生了变化（无论变化来自何处，您或您的用户）

我不确定你想对之后返回的对象做什么，但由于代码非常小，我希望你只需要在一些列表中显示它的值...

所以我会写这样的东西，你仍然可以访问 Array 中的每个项目，就像它是 object:

# course.model.ts
export class courseModel {
    title:  string = "";
    price:  string = "";
    author: string = "";
}

# app.component.ts
import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  courses : Observable<courseModel[]> = new courseModel();

  constructor(db: AngularFireDatabase) {
      this.courses = db.list('/courses').valueChanges();          
  }
}

# app.html
<p *ngFor="let course of courses | async">
 {{ course.title }}
 {{ course.author }}
 {{ course.price }}
</p>

Answer 3

这是一个简单的更改，您的代码可以按原样工作

它对我有用

首先你需要使用数据类型any[] of courses
你需要使用subscribe方法而不是直接存储valueChanges()值到变量
因为angular旧版本直接支持valueChanges()方法获取值，但在最新的angular版本中你需要使用订阅方法并像这样赋值。

courses : any[]; constructor(db:AngularFireDatabase){ db.list('/courses').valueChanges().subscribe(courses=> { this.courses=courses; console.log(this.courses); });

从 firebase 获取数据

Data fetch from firebase

firebase

firebase-realtime-database

angularfire2