Estoy tratando de recuperar un solo objeto de firebase y enviarlo a un formulario para editarlo. Recupero el único objeto con lo siguiente:
this.product = this.af.database.object('/products/'+ productId);e intente enviarlo a la plantilla de esta manera:
<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>pero la salida a los campos del formulario no funciona. Por favor ayuda. He intentado aplicar el operador asíncrono de esta manera
<ion-input type="number" [(ngModel)]="product.amount" name="amount" value="product.amount | async"></ion-input>pero tampoco funciona.
Debe implementar el subscribe pattern como se muestra a continuación.
servicio.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); }página.ts
public product: data-type; constructor(public service: Service) { this.service.getProduct(productId).subscribe(snap => { this.product = snap; }); }Puede usar esto usando la versión actual de angularfire2 como se muestra a continuación
controlador.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>