Ошибка при получении объектов из базы данных Firebase

Question

введите описание изображения здесь

введите описание изображения здесь

import { Component, OnInit } from '@angular/core';
import { CategoryService } from 'src/app/service/category.service';

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

    constructor(categoryService: CategoryService) {
        this.categories$ = categoryService.getCategories();
        console.log(this.categories$);
    }
    ngOnInit(): void { }
}



@Injectable({
    providedIn: 'root'
})
export class CategoryService {
    constructor(private db: AngularFireDatabase) { }

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

}

<div class="form-group">
    <label for="category">Category</label>
    <select id="category" class="form-control">
        <option value=""></option>
        <option *ngFor="let c of (categories$|async)" [value]=""> {{c.name}} </option>
    </select>
</div>

Попытка получить объекты из базы данных в реальном времени базы данных, как показано на рисунке, и получение ошибки, показанной на рисунке 2. Как это исправить? Пожалуйста, помогите.

Answer 1

constructor(categoryService:CategoryService, private productService:ProductService) { 

    this.categories$ = categoryService.getCategories().snapshotChanges();

  }



 <option class="form-control" *ngFor="let c of (categories$|async)" [value]="c.key"> {{c.payload.val().name}} </option>



getCategories() {

    return this.db.list('/categories', ref => (ref.orderByChild('name')));

  }

Это дает мне правильный результат. Спасибо за вашу помощь.

Answer 2

Во-первых, вам нужно использовать valueChange ():

export class ProductFormComponent implements OnInit {
    categories$;

    constructor(categoryService: CategoryService) {
        this.categories$ = categoryService.getCategories().valueChanges();
        // console.log(this.categories$);
    }
    ngOnInit(): void { }
}

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