Unable to fetch $key from firebase in Angular5 template

Question

I am making a form in Angular5 using firebase in backend. The form contains few input fields and a dropdown.

I'm able to populate values ({{ c.name }}) in dropdown options but value attribute of option is coming empty which I'm trying to populate using c.$key.

Below is the HTML part:

<form #f="ngForm" (ngSubmit)="save(f.value)">
    <!-- other input fields here -->
    <div class="form-group">
        <label for="category">Category</label>
        <select ngModel name="category" id="category" class="form-control">
          <option value=""></option>
          <option *ngFor="let c of categories$ | async" [value]="c.$key"> 
            {{ c.name }} 
          </option>
        </select>
    </div>
</form>

Here is my component:

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

@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();
  }

  ngOnInit() {
  }

  save(product) {
    console.log(product);
  }

}

Service:

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

    @Injectable()
    export class CategoryService {

      constructor(private db: AngularFireDatabase) { }

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

I'm printing value of form json on console. The value of category is coming undefined.

{title: "Title", price: 10, category: "undefined", imageUrl: "xyz"}

Please guide me what am I missing.

Possible duplicate of Angular FIrebase 5 objects keys not being displayed. So can't delete — R. Richards
– R. Richards, Commented May 12, 2018 at 16:26
@R.Richards thanks. It was helpful. I fetched key using c.key and did below changes in service method: ` getCategories() { return this.db.list('/categories', ref => ref.orderByChild('name')) .snapshotChanges().map(categories => { return categories.map(c => ({ key: c.payload.key, ...c.payload.val() })); }); }` — Joginder Pawan Kumar
– Joginder Pawan Kumar, Commented May 12, 2018 at 17:09
I do the same. Seems to work well for what is needed. Glad you found the link helpful. I think I used that same answer when I ran across this issue the first time. — R. Richards
– R. Richards, Commented May 12, 2018 at 17:11

Muhammad Dyas Yaskur · Accepted Answer · 2020-05-21 10:14:15Z

1

$key has been deprecated. Use snapshotChanges() instead.

category.service.ts

getCategories() {
    return this.db
        .list('/categories', (ref) => ref.orderByChild('name'))
        .snapshotChanges()
        .pipe(
        map((actions) => {
            return actions.map((action) => ({
                key: action.key,
                val: action.payload.val(),
            }));
        }));

}

app.component.html

<option *ngFor="let c of categories$ | async" [value]="c.key">
    {{ c.val.name }}
</option>

edited May 21, 2020 at 10:14

Muhammad Dyas Yaskur

8,35811 gold badges62 silver badges91 bronze badges

answered May 21, 2020 at 9:03

Shubhranil Dutta

113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to fetch $key from firebase in Angular5 template

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related