InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe

0
votes

When I am trying fetch data from firebase I am not getting the value from it, it says:- "InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe". please help me to resolve this error.

This is my Product-component

import { Component, OnInit } from '@angular/core';
import { AssignService } from 'src/app/assign.service';
    
@Component
({
selector: 'app-product-form',
templateUrl: './product-form.component.html',
styleUrls: ['./product-form.component.css']
})

export class ProductFormComponent {
categories$;
    
constructor(public assignmentService: AssignService) 

{ 
 
this.categories$ = assignmentService.getAssignment();
  
 }
         
 }

This is my Service

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Injectable()
export class AssignService {

  constructor(private db: AngularFireDatabase) { }

  getAssignment(){

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

}

This is my HTML Page

<form>
    <div class="form-group">
        <label for="title">Title</label>
        <input id="title" type="text" class="form-control">
    </div>
    <div class="form-group">
        <label for="price">Price</label>
        <div class="input-group">
        <span class="input-group-text">$</span>
        <input id="price" type="number" class="form-control">
    </div>
    </div>
    <div class="form-group">
        <label for="catagory">Catagory</label>
        <select id="catagory"  class="form-control">
        <option value="" ></option>
        <option *ngFor="let cat of categories$ | async" [value]= "cat.$key">
            {{ cat.name}}
        </option>
        </select>   
    </div>

    <button class="btn btn-primary">Save</button>

</form>
1
angular

1 Answers

1
votes

try to add valueChanges

this.db.list('/categories').valueChanges();