Can i use AngularfireList without observables means can i return angularfirelist object from firebase and after this unwrap in template

Question

I try to get an object from Firebase with AngularFire and use angularfirelist. However, it did not return an object as I expected. Here is my code****emphasized text

 export class AdminProductsComponent implements OnInit {
  products$ : AngularFireList<unknown>;

  constructor(private productService :ProductService) {
    this.products$ = this.productService.getAll();
    console.log("helo");
     console.log(this.products$);

**SERVICE PRODUCT.TS**

export class ProductService {

  constructor(private db : AngularFireDatabase) { }


  create(product)
  {

    return this.db.list('/product').push(product);
  }
  // getAll() {
  //   return this.db.list('/product')
  //     .snapshotChanges()
  //     .pipe(map(changes => changes.map(c => ({
  //       $key: c.payload.key, $value: c.payload.val()
  //     }))));
  // }

  getAll()
  {
    return this.db.list('/product');
  }

// getAll method return type is (method) ProductService.getAll(): //AngularFireList ** this is object i got from firebase i can't able to understand this .help me out ** in chrome console i got ` {query: Reference, update: ƒ, set: ƒ, push: ƒ, remove: ƒ, …} auditTrail: ƒ auditTrail(events) push: (data) => query.ref.push(data) query: Reference {repo: Repo, path: Path, queryParams_: QueryParams, orderByCalled_: false} remove: ƒ remove(item) set: ƒ dataOperation(item, value) snapshotChanges: ƒ snapshotChanges(events) stateChanges: ƒ stateChanges(events) update: ƒ dataOperation(item, value) valueChanges: valueChanges(events) { /** @type {?} */ const snapshotChanges$ = snapshotChanges(query, events, outsideAngularScheduler); return snapshotChanges$.pipe(Object(rxjs_operators__WEBPACK_IMPORTED_MODULE_2__["map"])((/** * @param {?} actions * @return {?} */ actions => {…} proto: Object

Hi, Can I get the console of expected and observed output? – Vimal Munjani May 24 '20 at 08:18 — Vimal Munjani, May 24 '20 at 08:18

score 1 · Answer 1 · answered May 24 '20 at 08:19

1

AngularFireDatabase's list function returns an observable. You need to subscribe to it obtain the values. Try the following

export class AdminProductsComponent implements OnInit {
  products : AngularFireList<any>;           // <-- use `any` here

  constructor(private productService :ProductService) {
    this.productService.getAll().subscribe(
      response => {
        this.products = response;
        console.log(this.products);
      }
    );
  }
}

^{By convention, variable names with a suffixed dollar sign are used to denote observables. Since the products variable here is of type AngularFireList, it could be removed.}

answered May 24 '20 at 08:19

ruth

29,535
4
30
57

but when i hover on getall() . i observed its type ``(method) ProductService.getAll(): AngularFireList`` – utkarsh singh May 24 '20 at 08:36
See here for differences b/n `unknown` and `any`: https://stackoverflow.com/a/51439876/6513921. Essentially, `unknown` is the type-safe counterpart of `any`. Both would work here. – ruth May 24 '20 at 08:46

Can i use AngularfireList without observables means can i return angularfirelist object from firebase and after this unwrap in template

1 Answers1