javascript - 在 ngForm 中使用时未定义选择列表

Question

我是 Angular 初学者，我正在尝试打印在控制台中选择的表单元素的值。所有其他元素都已打印，但 select 选定列表元素显示 undefined。这是我的代码category.services.ts

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

@Injectable({
  providedIn: 'root'
})
export class CategoryService {

  constructor(private db: AngularFireDatabase) { }

  getCategories(){
    return this.db.list('/categories').valueChanges()
      }
}

product-form.component.ts

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

@Component({
  selector: 'app-product-forum',
  templateUrl: './product-forum.component.html',
  styleUrls: ['./product-forum.component.css']
})
export class ProductForumComponent implements OnInit {

  categories$
  constructor(categoryService: CategoryService) {
    this.categories$=categoryService.getCategories()
   }

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

  ngOnInit() {
  }

}

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>
            <input ngModel name="price" id="price" type="number" class="form-control">
    </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="image" id="imageUrl" type="text" class="form-control">
    </div>
    <button class="btn btn-primary">Save</button>
</form>

点击保存按钮后，

控制台

{title: "title", price: 10, category: "undefined", image: "imageUrl"}
category: "undefined"
image: "imageUrl"
price: 10
title: "title"
__proto__: Object

类别

Answer 1

使用 ngValue 代替 value，如下所示。

  <select ngModel name="category" id="category" class="form-control">
    <option value=""></option>
    <option *ngFor="let c of categories$ | async" [ngValue]="c.name">
        {{ c.name }}
    </option>
  </select>