从 firebase 检索单个对象并输出到表单进行编辑

Question

我正在尝试从 firebase 检索单个对象并将其输出到表单以供编辑。我使用以下检索单个对象：

this.product = this.af.database.object('/products/'+ productId);

并尝试像这样将其输出到模板中：

  <ion-item>
    <ion-label stacked>Date</ion-label>
    <ion-datetime [(ngModel)]="product.date" name="date" required></ion-datetime>
  </ion-item>
  <ion-item>
    <ion-label stacked>Content</ion-label>
    <ion-input type="text" [(ngModel)]="product.content" name="content" required></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>Amount</ion-label>
    <ion-input type="number" [(ngModel)]="product.amount" name="amount"></ion-input>
  </ion-item>  
  <ion-item>
    <ion-label stacked>Category</ion-label>
    <ion-select type="text" [(ngModel)]="product.category" name="category" required>
      <ion-option>Book</ion-option>
      <ion-option>Baby</ion-option> 
      <ion-option>Clothing</ion-option> 
   </ion-select>
  </ion-item>  
</ion-list>

但是无法输出到表单的字段。请帮忙。我试过像这样应用异步运算符

    <ion-input type="number" [(ngModel)]="product.amount" name="amount" value="product.amount | async"></ion-input>

但还是不行。

Answer 1

您必须按如下所示实施 subscribe pattern。

service.ts

 product : FirebaseObjectObservable<data-type>;

 constructor(public af: AngularFire) {}

  //get product
  getProduct(productId : string): FirebaseObjectObservable<data-type> {
    return this.product = this.af.database.object('/products/'+ productId);
  }

page.ts

public product: data-type;

constructor(public service: Service) {

    this.service.getProduct(productId).subscribe(snap => {
      this.product = snap;
    });
  }

Answer 2

您可以像下面这样使用当前的 angularfire2 版本来使用它

controller.ts

import { Observable } from 'rxjs/Observable';
.......
product : Observable<any>;

constructor(public db: AngularFireDatabase) {
    this.product = this.db.object('/products/'+ productId)
        .snapshotChanges().map(res => {
            return res.payload.val();
        });
}

html

<ion-input type="number" value="{{(product|async)?.amount}}" [(ngModel)]="product.amount" name="amount"></ion-input>

从 firebase 检索单个对象并输出到表单进行编辑

retrieve a single object from firebase and output to a form for edit

firebase

ionic-framework

ionic2

angularfire2

angular