在 Firebase 中保存产品 - 类别未定义答案

【问题标题】：Saving the Product in Firebase - category undefined在 Firebase 中保存产品 - 类别未定义
【发布时间】：2018-07-07 13:56:30
【问题描述】：

我刚刚学习了 Udemy - The Complete Angular Course - Beginner to Advanced 在将产品保存在 Firebase "category": "undefined" 时遇到了一点问题

我使用角度版本

Angular CLI：6.0.8

"products" : {
        "-LGoVcK9sUP-lzEqXy-1" : {
          "category" : "undefined",
          "imageUrl" : "imageUrl",
          "price" : 12,
          "title" : "title"
        }

<form #f="ngForm" (ngSubmit)="save(f.value)">
      <div class="form-group">
        <label for="title">Title</label>
        <input ngModel name="title" type="text" id="title" class="form-control">
      </div>
      <label for="price">Price</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">$</span>
        </div>
        <input ngModel name="price" type="number" class="form-control" id="price">
      </div>
      <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>
      <div class="form-group">
        <label for="imageUrl">Image URL</label>
        <input ngModel name="imageUrl" type="text" id="imageUrl" class="form-control">
      </div>
      <button class="btn btn-primary">Save</button>
    </form>

constructor(
    private db: AngularFireDatabase
  ) { }

  create(product) {
    this.db.list('/products').push(product);
  }

【问题讨论】：

categories$ observable 长什么样？请添加此代码。
喜欢这个export class CategoryService { constructor( private db: AngularFireDatabase ) { } getCategories() { return this.db.list('/categories', ref => ref.orderByChild('name') ).valueChanges(); } }
喜欢这个export class ProductFormComponent implements OnInit { categories$; constructor( categoryService: CategoryService, private productService: ProductService ) { this.categories$ = categoryService.getCategories(); } save(product) { this.productService.create(product); } ngOnInit() { } }
什么版本的 angularfire2？从版本 5 开始，$key 元数据不会使用 .valueChanges() 自动解包。如果您需要访问此元数据，您需要使用.snapshotChanges()
我使用版本：angularfire2": "^5.0.0-rc.11 我将替换使用.snapshotChanges()

标签： angular typescript firebase

【解决方案1】：

1.在 Categoryservice 中将 valueChanges() 更改为 snapshotChanges()
2. 在 productform.html 中将 c.name 更改为 c.payload.val().name。
3. [value]="c.key"

 <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.payload.val().name}}
  </option>
</select>
</div

【讨论】：