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