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

Question

我刚刚学习了 Udemy - 完整的 Angular 课程 - 从初学者到高级在将产品保存在 Firebase“类别”：“未定义”中有一个小问题

我使用角版本

角 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);
  }

Answer 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