Выборка данных из базы данных - PullRequest
Новая
       7

Выборка данных из базы данных

0 голосов
/ 30 августа 2018 
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 как объект вместе с массивом. Пожалуйста, помогите мне и скажите, где я ошибаюсь в своем коде. Я хочу массив объектов в качестве конечного результата с этим кодом.

Ответы [ 2 ]

0 голосов
/ 06 октября 2018

чтобы ответить на ваш вопрос: да, это нормальное поведение.

Поскольку 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>
0 голосов
/ 30 августа 2018

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

valueChanges ()

Что это? - Возвращает Observable данных в виде синхронизированного массива объектов JSON. Все метаданные снимка удаляются, и только метод предоставляет только данные.

Таким образом, вместо получения [{ key: value }] вы получаете [value].

Если вы хотите полный объект, включая ключ, используйте snapshotChanges().
Для этого вам также потребуется импортировать map из rxjs / операторов. 

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 }], дайте мне знать, и я обновлю свой ответ.

...