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元数据，仅该方法仅提供数据。

因此，您得到的不是[{ 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);
  });

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

Answer 3

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

对我有用

首先，您需要使用课程的数据类型 any []
您需要使用 subscribe 方法，而不是直接将 valueChanges（）值存储到变量中
因为有角度的旧版本直接支持 valueChanges（）方法来获取值，但是在最新的角度版本中，您需要使用 subscribe方法并分配值

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

从Firebase提取数据

3 个答案: