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

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

实际行为： [“课程 1”、“课程 2”、{...}、{...}]

上面的代码返回一个数组，但我期望的是一个对象数组。同样返回的类型，但 valueChanges() 是 Observable。我想知道它是 valueChanges() 的正常行为，即返回一个 Observable 作为对象以及一个数组。请帮帮我，告诉我我的代码哪里错了。我想要一个对象数组作为此代码的最终结果。

Answer 1

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

由于 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 2

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

valueChanges()

它是什么？ - 将 Observable 数据作为 JSON 对象的同步数组返回。所有 Snapshot 元数据都被剥离，只有方法只提供数据。

所以你得到的是[value]，而不是[{ key: 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);
  });

这将返回结构为[{ key: value }] 的用户数组。如果您希望它的格式不同，例如 [{ "key": key, "value": value }]，请告诉我，我会更新我的答案。

Answer 3

这是一个简单的更改，您的代码可以正常工作

它对我有用

1. 首先您需要使用数据类型任何[]的课程

2. 您需要使用 subscribe 方法而不是直接将 valueChanges() 值存储到变量中

3. 由于 Angular 旧版本直接支持 valueChanges() 方法来获取值，但在最新的 Angular 版本中，您需要使用 subscribe 方法 并像这样分配值。 p>

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