retriving data from firebase when i want display key value

[rajadileepkumar]

retriving data from firebase when i want display key value when i'm using below line [value]="c.$Key" i'm getting undefined message getting

[Malikhaseebtahir]

i have also the same issue

[Malikhaseebtahir]

@rajadileepkumar have you solves this issue ??

[danonjam]

I have the same issue. Is there any update?

[Malikhaseebtahir]

@danonjam Which version of angular you are using ?

[danonjam]

@Malikhaseebtahir Version 7.

[danonjam]

I think @mosh-hamedani Mosh just reply to his students.

[mariavkou]

Hi everyone! This works for me. This is what I did for version 7: at product-form.component.html: <option *ngFor="let c of categories$" [value]="c.name"> {{ c.name }} </option> and then at product-form.component.ts, I defined the categories$ as observable and then subscribed it as below:

import { Observable } from 'rxjs/Observable';
......
export class ProductFormComponent implements OnInit {
  categories$: Observable<any[]>;
 ......
constructor(
private categoryService: CategoryService,....) {

this.categoryService.getAll().valueChanges().subscribe(res => this.categories$ = res as any);
.........

[mariavkou]

When working with a newer version of angular, one temporary good solution is to use this: npm install --save rxjs-compat, which can make your/the "old" (Angular 4) code work.

Have a look here: link

[mariavkou]

Since the '$key' at the new firebase version does not work, you have to find another way to have access at each item. What I did is to create my own id and use it to access the products. At product.service.ts: create(product) { const urlId = new Date().getTime(); return this.db.object('/products/' + urlId).set({ id: urlId, title: product.title, imageUrl: product.imageUrl, category: product.category, price: product.price }); }

I hope this will help.

[mudassar2200]

retriving data from firebase when i want display key value when i'm using below line [value]="c.$Key" i'm getting undefined message getting this work for me.

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

 <tr *ngFor="let p of product$ | async" >
        <td>{{p.payload.val().title}}</td>
        <td>{{p.payload.val().price}}</td>
        <td>
            <a [routerLink]="['/admin/products/', p.key]">Edit</a>
        </td>
    </tr>

[vinhct99]

Hi everyone! This works for me. This is what I did for version 7: at product-form.component.html: <option *ngFor="let c of categories$" [value]="c.name"> {{ c.name }} </option> and then at product-form.component.ts, I defined the categories$ as observable and then subscribed it as below:

import { Observable } from 'rxjs/Observable';
......
export class ProductFormComponent implements OnInit {
  categories$: Observable<any[]>;
 ......
constructor(
private categoryService: CategoryService,....) {

this.categoryService.getAll().valueChanges().subscribe(res => this.categories$ = res as any);
.........

thanks so much