Javascript 在ngForm中使用时，选择列表未定义

我是一个角度初学者，我正在尝试打印控制台中选择的表单元素的值。其他元素都已打印，但

select

selected列表元素显示

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

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

}

产品形式.component.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()
      }
}

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

}

产品表单.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>

类别

---

使用

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>

{{c.name}}

尝试将c.$键替换为c.name或仅替换为c。它应该会起作用。如果没有，请分享您的JSON示例

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

{{c.name}}

{{c.name}}

categories$数组的外观如何？嘿！我已经用分类数据更新了帖子。你能添加你的代码吗？请不要只发布代码作为答案，还要解释你的代码的作用以及它是如何解决问题的。带有解释的答案通常更有帮助，质量更好，更容易吸引选票