Prefill-Formular mit AngularFire2 Objekt Observable

Question

Ich kann ein Formular nicht mit den Daten ausfüllen, die an einem Ort in Firebase mit AngularFire2 gespeichert sind. Die Vorlage hat mehrere Eingänge wie:

<form (ngSubmit)="onSubmit(propertyForm.value)" #propertyForm="ngForm"> 
    <div class="form-group"> 
    <md-input-container> 
     <input md-input placeholder="Postcode" type="text" id="postcode" required [(ngModel)]="model.postcode" name="postcode"> 
    </md-input-container> 
    </div> 
</form> 

Diese verbindet sich dann mit der Komponente, die ein Modell (Property) hat, die die Konstruktor Links direkt auf das Objekt, das ich in der Form angezeigt werden sollen.

export class PropertyFormComponent implements OnInit { 

model: FirebaseObjectObservable<Property>; 
    submitted = false; 
    propertyForm; 

    constructor(private propertyService: PropertyService, af: AngularFire) { 
    this.model = af.database.object('/properties/MGQ34xmYDdT8IGLaj3zvBwZjWgW2'); 
    } 
} 

Ich weiß, dass das Objekt Pfad korrekt ist, wie ich das Formular und das Objekt aktualisieren, aber die ngModel Bindung ist nicht auf das Objekt Firebase verbindet, und ich kann nicht herausfinden, warum. Ich habe versucht, das Firebase-Objekt durch ein handgefertigtes Objekt zu ersetzen, und es hat gut funktioniert. Danke für jede Hilfe!

Answer 1

Das Firebase-Objekt ist ein Observable, kein einfaches JS-Objekt, was bedeutet, dass Sie ngModel nicht übernehmen können. Sie könnten tatsächlich versuchen, die Observable in ein einfaches Objekt zu konvertieren, so dass ngModel verwendet werden kann.

So bekommen zuerst die beobachtbaren und dann abonnieren:

constructor(private propertyService: PropertyService, af: AngularFire) { 
    this.model = af.database.object('/properties/MGQ34xmYDdT8IGLaj3zvBwZjWgW2'); 
    this.model.subscribe(d => {this.model = d}); // add this line! 
} 

Sie jetzt ein einfaches Objekt mit

:) arbeiten müssen

Eine bessere Option wäre, wenn Sie direkt auf das Objekt abonnieren , aber ich brauche nicht Firebase zu benutzen, ich bin mir nicht sicher, ob das funktioniert, aber Sie könnten es versuchen:

af.database.object('/properties/MGQ34xmYDdT8IGLaj3zvBwZjWgW2') 
    .subscribe(d => { 
    this.model = d 
    })