ngModel未綁定角度4中的select

Question

我的應用程序中有一個表單，其中包含title ， price ， category (select)和imagUrl數據。 我對每個字段都應用了ngModel ，除了select元素之外，它都工作正常。 當我console.log()表單數據時，我得到每個字段的值，但未定義的select元素的值。 我進口AngularForms模塊中app.module.ts

這是我的product-form-component-html代碼

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

這是product-form-component.ts文件

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

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

我究竟做錯了什么？ 請幫助我詳細的答案

我的Firebase數據庫

Answer 1

這就是答案[value]="c.$key" 。 我分配了[value]="c.key$" ，這就是我遇到錯誤的原因。