I am trying to retrieve a single object from firebase and output to a form for edit. I retrieve the single object with the below:
this.product = this.af.database.object('/products/'+ productId);
and try to output it into the template like this:
<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>
but the outputting to the form's fields doesn't work. Please help. I have tried applying the async operator like this
<ion-input type="number" [(ngModel)]="product.amount" name="amount" value="product.amount | async"></ion-input>
but it doesn't work too.
You have to implement subscribe pattern as shown below.
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;
});
}
You can use this using current angularfire2 version like below
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>