получить данные из базы данных в угловых 5

Question

Я новичок в firebase и angular, пытаясь понять, что я создал данные в firebase и теперь хочу получить в angular 5. Но это не работает.

Структура данных Firebase:

category.service.ts:

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class CategoryService {

  constructor(private db: AngularFireDatabase) { }

  getCategories(){
    return this.db.list('/categories').valueChanges();
  }

}

Product-form.component.ts

import { CategoryService } from './../../category.service';
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
  categories$; // Observable

  constructor(private categoryService: CategoryService) {
  }

  ngOnInit() {
    this.categories$ = this.categoryService.getCategories();
    console.log(this.categories$);
  }

}

product-form.component.html

<select class="form-control" name="" id="category">
        <option value=""></option>
        <option  *ngFor="let c of categories$ | async" [value]="c.$key">
          {{c.name}}
        </option>
    </select>

Ошибка в консоли, которую я получаю:

Скажите, пожалуйста, что не так с моим кодом.

Answer 1

Вы должны попробовать использовать цикл for in.Подпишитесь на http observable и затем заполните его в массиве или структуре данных, необходимых для вашей бизнес-логики, используя цикл for.

Затем используйте эту новую структуру данных в HTML.Если вы выберете массив, цикл for определенно будет работать в вашем HTML-файле.

Надеюсь, это поможет.Удачи !!

Answer 2

Эй, вы используете rxjs?Может быть, рассмотреть в этой теме, где я уже ответил на аналогичную проблему. RXJS-версия проблемы

В большинстве случаев проблема в том, что ваша версия rxjs не на версии 6. Также, пожалуйста, подумайте, используете ли вы версию меньше 6, и выпопробуй обновить посмотри в мой ответ.Существует руководство по миграции, которому вы должны следовать для перехода на версию 6.

Надеюсь, это решит вашу проблему.