Angular - выбранная опция не сохраняется в объекте ngForm

Question

Отредактировано для удаления ненужного кода.

Я пытаюсь распечатать объект формы на консоли, но выбранная опция не отображается.В консоли отображается 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, я получу удобное для пользователя имя.

Answer 1

Я нашел ответ по ссылке ниже.Вместо .valueChanges() мы должны использовать .snapshotChanges(), поскольку первый возвращает Observable без каких-либо метаданных.

Обновление до 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: В интерполяции опции выбора изменилось 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>

....

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>