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

Question

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

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

我已经把代码放在下面了。如果有人能够指导这个特定代码的错误，这将是很有帮助的。如果需要任何其他信息，请告诉我。

组成部分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，我将得到用户友好的名称。

Answer 1

我在下面的链接上找到了答案。而不是。valueChanges（）我们应该使用。snapshotChanges（），因为前者返回一个不带任何元数据的可观察值。

升级到AngularFire 5.0

下面给出了带有更改的更新文件。

类别服务ts:已将valueChanges（）更改为snapshotChanges（）。

import { AngularFireDatabase } from 'angularfire2/database';

....

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

....

组成部分html：在选择选项插值中，将c.name更改为c.payload。val（）。名称。

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

....

Answer 2

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