Angular - 未在 ngForm 对象中捕获所选选项答案

【问题标题】：Angular - Selected option not being captured in ngForm objectAngular - 未在 ngForm 对象中捕获所选选项
【发布时间】：2018-05-22 16:30:10
【问题描述】：

已编辑以删除不相关的代码。

我正在尝试将表单对象打印到控制台，但未显示所选选项。它在控制台中显示为 undefined。

我已将代码放在下面。如果有人可以指导此特定代码有什么问题，那将很有帮助。如果需要任何其他信息，请告诉我。

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

....

Component.ts：

import { CategoryService } from './../../category.service';

....

export class ProductFormComponent implements OnInit {

  categories$;

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

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

....

Category.Service.ts：

import { AngularFireDatabase } from 'angularfire2/database';

....

  getCategories() {
    return this.db
      .list('/categories', ref => ref.orderByChild('name'))
      .valueChanges();
  }

....

我想从 Firebase 数据库中突出显示要在对象中捕获的值。如果我输入 c.name，我将获得用户友好的名称。

【问题讨论】：

categories 集合中是否有 .key 属性？
这是一个 firebase 数据库条目。我相信它具有 .key 属性。我也尝试过 .$key 。我已更新问题以包含我想要获取的价值。
您可能应该稍微缩短您的问题。不相关的代码太多了。
@DawidZbiński 是的，我仍然习惯于发布问题。我不确定问题出在哪里，通常我会看到其他人的 cmets 说要发布更多代码以进一步澄清。为了谨慎起见，我犯了错误，并在此处发布了大部分相关代码。
@DawidZbiński 我已根据您的建议对其进行了编辑。感谢您的评论。

标签： angular typescript firebase ngmodel

【解决方案1】：

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

【讨论】：

没有对象。这适用于 firebase，我只是想将 ngForm 对象打印到控制台。你说的我试过了，还是不行。

【解决方案2】：

我在下面的链接中找到了答案。我们应该使用.snapshotChanges() 而不是.valueChanges()，因为前者返回一个没有任何元数据的Observable。

Upgrading to AngularFire 5.0

下面给出了更新后的文件。

Category.service.ts： 将valueChanges() 更改为snapshotChanges()。

import { AngularFireDatabase } from 'angularfire2/database';

....

  getCategories() {
    return this.db
      .list('/categories', ref => ref.orderByChild('name'))
      .snapshotChanges();
  }

....

Component.html：在select选项插值中，将c.name改为c.payload.val().name。

<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="blank"></option>
      <option *ngFor="let c of categories$ | async" [value]="c.key">
        {{ c.payload.val().name }}
      </option>
    </select>
  </div>

....

【讨论】：