Невозможно получить $ key из firebase в шаблоне Angular5

Question

Я делаю форму в Angular5 , используя firebase в бэкэнде.Форма содержит несколько полей ввода и раскрывающийся список.

Я могу заполнить значения ({{c.name}}) в раскрывающихся параметрах, но атрибут значения параметра становится пустым, который я пытаюсь заполнитьиспользуя ключ c. $ .

Ниже приведена часть HTML:

<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>

Вот мой компонент:

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

}

Служба:

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

Я печатаю значение формы json на консоли.Значение категории не определено.

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

Пожалуйста, подскажите, что мне не хватает.