Question

我刚刚学习了Udemy-完整的Angular课程-从入门到高级，在将产品保存到Firebase中的“类别”：“未定义”方面存在一些问题

我使用角度版本

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

Answer 2

Juse使用 ngModel

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

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

2 个答案: