Angular中ngForm无法捕获下拉框选中值问题求助

我来帮你分析下问题所在：你现在遇到的核心问题是，下拉框绑定c.key时form对象里的category字段是undefined，但绑定c.name就正常，这是因为你的CategoryService里用了valueChanges()方法来获取分类数据——这个方法只会返回Firebase节点里的数据值，不会包含每个分类条目的Firebase原生key。所以模板里的c.key实际上是不存在的（undefined），自然无法被ngForm捕获到。

下面给你两种可行的解决方案：

方法一：用snapshotChanges()映射key（推荐） #

修改Category.Service.ts里的getCategories()方法，改用snapshotChanges()获取包含快照的数据流，然后把每个条目的key映射到返回的对象中：

import { AngularFireDatabase } from 'angularfire2/database';
import { map } from 'rxjs/operators'; // 需要导入map操作符

// ...

getCategories() {
  return this.db
    .list('/categories', ref => ref.orderByChild('name'))
    .snapshotChanges()
    .pipe(
      map(changes => 
        changes.map(c => ({ 
          key: c.payload.key, 
          ...c.payload.val() // 展开原有数据字段，比如name
        }))
      )
    );
}

这样返回的每个分类对象都会包含key和name字段，模板里的[value]="c.key"就能正常获取到Firebase的key值，提交表单后save方法里打印的product对象中，category字段就是选中的key了。

方法二：保留valueChanges()并开启快照保留 #

如果你更倾向于使用valueChanges()，可以通过传递参数开启快照保留，同样映射key值：

import { AngularFireDatabase } from 'angularfire2/database';
import { map } from 'rxjs/operators';

// ...

getCategories() {
  return this.db
    .list('/categories', ref => ref.orderByChild('name'))
    .valueChanges({ preserveSnapshot: true })
    .pipe(
      map(snapshots => 
        snapshots.map(snap => ({ 
          key: snap.key, 
          ...snap.val()
        }))
      )
    );
}

两种方法都能解决你的问题，其中方法一更符合AngularFire的常用实践。修改后你再测试一下，控制台打印的form对象里就能正常捕获到选中的category key啦～

内容的提问来源于stack exchange，提问作者Rijaz Ali