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

Question

刚学了Udemy - The Complete Angular Course - Beginner to Advanced 在Firebase "category": "undefined"中保存产品有点问题

我用的是angular版本

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

Answer 1

1.在Categoryservice中将valueChanges()改为snapshotChanges()
2. 在 productform.html 中将 c.name 更改为 c.payload.val().name.
3. [值]="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