Q:

How to get a key of node in Angularfirelist from Firebase Realtime Database

I am getting these Categories form Firebase database.
Database Snapshot:  
here is CategoryService and getCategories is returning AngularFireList<unknown>.
export class CategoryService {
  constructor(private db: AngularFireDatabase) {}

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

this is the ProductComponant.
export class ProductFormComponent {
  categories;
  constructor(
    categoryService: CategoryService,
    private productService: ProductService
  ) {
    categoryService.getCategories().valueChanges().subscribe((categories) => {
      this.categories = categories;
    });
  }

in categories I am getting this.
 
and this is the HTML markup
<div class="form-group">
        <label for="category">Category</label>
        <select ngModel name="category" class="form-control" id="category">
            <option *ngFor="let c of categories" [value]="c.$key"> {{c.name}} </option>      
        </select>
    </div>

Here I want to get the key/id of every node in Categories and set it as Value in the category DropDown.
I have tried c.key, c.$key, c.id and c | json. but none works.

A:

Ok, I get it. the problem is with .valueChanges() because it returns only data and not meta data. So i changed my code as.
CategoryService.ts:
export class CategoryService {
  aflCategories: AngularFireList<any>;
  constructor(private db: AngularFireDatabase) {}

   getCategories(){
     this.aflCategories = this.db.list('/categories', category => category.orderByChild('name'));
     return this.aflCategories
     .snapshotChanges()
     .pipe(map(changes => changes
     .map(c => ({ key: c.payload.key, ...c.payload.val() }))));
   }
}

ProductFormComponent.ts :
export class ProductFormComponent {

  categories$: Observable<any[]>;

  constructor(
    categoryService: CategoryService,
    private productService: ProductService,
    private db: AngularFireDatabase
  ) {
    this.categories$ = categoryService.getCategories();
  }

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

and now i got the 'Key' as well.

