angular - Angular - 未在 ngForm 对象中捕获所选选项
问题描述
编辑删除不相关的代码。
我正在尝试将表单对象打印到控制台,但未显示所选选项。它在控制台中显示为未定义。
我已经把代码放在下面了。如果有人可以指导此特定代码有什么问题,那将很有帮助。让我知道是否需要任何其他信息。
组件.html:
<form #f="ngForm" (ngSubmit)="save(f.value)">
....
<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>
....
组件.ts:
import { CategoryService } from './../../category.service';
....
export class ProductFormComponent implements OnInit {
categories$;
constructor(categoryService: CategoryService) {
this.categories$ = categoryService.getCategories();
}
save(product) {
console.log(product);
}
....
类别.Service.ts:
import { AngularFireDatabase } from 'angularfire2/database';
....
getCategories() {
return this.db
.list('/categories', ref => ref.orderByChild('name'))
.valueChanges();
}
....
我想从 Firebase 数据库中突出显示要在对象中捕获的值。如果我把 c.name 我得到用户友好的名称。
解决方案
//you need to bind object field in selection [(NgModel)] like below example
<select [(ngModel)]="urobject.category" name="category" id="category" class="form-control">
<option value=""></option>
<option *ngFor="let c of categories$ | async" [value]="c.key">
{{ c.name }}
</option>
</select>
推荐阅读
- flutter - 如何从 firebase firestore flutter 下载 url 文件?
- c++ - NVCC 编译共享库
- windows - Windows 替换复制到奇怪的文本
- centos - OpenStack 安装中的 Cinder Db 同步超时错误
- python-3.x - configparser - 每个部分的不同解析规则?
- winnovative - 加密提供者为空
- java - 是否可以使用 DynamoDB 执行以下事务?
- animation - Chart.js 如何将动画命令重新发送到图表?
- facebook-messenger-bot - 类似文本的建议操作在 Facebook 中不起作用,但在 power virtual agent 中起作用
- java - JAVA_HOME 应该指向 JDK 而不是 JRE(但确实如此)