ngModel未绑定角度4中的select

Question

I have a form in my application which contains title , price , category (select) and imagUrl data. I applied ngModel with every field and it's working fine except the select element. When I console.log() form data I get the value of every field but the value of the select element which is undefined. I imported the AngularForms module in app.module.ts

this is my product-form-component-html code

<form #f="ngForm" (ngSubmit)="save(f.value)" >
  <div class="form-group">
    <label for="title">Title</label>
    <input ngModel name="title" id="title" type="text" class="form-control">
  </div>
  <div class="form-group">
    <label for="price">Price</label>
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <input ngModel name="price" id="price" type="number" class="form-control">
    </div>
  </div>
  <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>
  <div class="form-group">
      <label for="imageUrl">image URL</label>
      <input ngModel name="iamgeUrl" id="imageUrl" type="text" class="form-control">
  </div>
  <button class="btn btn-primary">Save</button>
</form>

this is product-form-component.ts file

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

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
  categories$;

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

  ngOnInit() {
  }

  save(product) {
    console.log(product);
    this.productService.create(product);
  }
}

this is product-service.ts

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

@Injectable()
export class ProductService {

  constructor(private db: AngularFireDatabase) { }

  create(product) {
    return this.db.list('/products').push(product);
  }
}

what am I doing wrong? please help me with detailed answer

my Firebase Database

Answer 1

this is the answer [value]="c.$key" . I was assigning [value]="c.key$" that is why i was getting error.