從 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 是一個實時數據庫，它希望跟蹤您查詢的任何路徑並查看它是否發生了變化（無論變化來自何處，您或您的用戶）

我不確定你想對之后返回的對象做什么，但由於代碼非常小，我希望你只需要將它的值顯示在某個列表中......

所以我會寫這樣的東西，你仍然可以像訪問object一樣訪問Array中的每個項目：

# 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

值變化()

它是什么？ - 返回數據的 Observable 作為同步的 JSON 對象數組。 所有快照元數據都被剝離，只有方法只提供數據。

所以你得到的不是[{ 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

這是一個簡單的更改，您的代碼可以按原樣工作

這對我有用

1. 首先你需要使用數據類型any[] of courses

2. 您需要使用訂閱方法而不是直接將valueChanges()值存儲到變量中

3. 由於 Angular 舊版本支持直接使用valueChanges()方法獲取值，但在最新的 Angular 版本中，您需要使用subscribe 方法並像這樣分配值。

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