AngularFire2オブジェクトを使用した事前充填フォームObservable

Question

AngularFire2を使用してFirebaseの場所に格納されたデータでフォームを事前入力することができません。テンプレートのような複数の入力があります。

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

これを、モデル（プロパティ）を直接、私は、フォームに表示するオブジェクトへのコンストラクタのリンクを持つコンポーネントに接続します。

export class PropertyFormComponent implements OnInit { 

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

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

私はフォームを送信してオブジェクトを更新することができますように、オブジェクトのパスが正しいことを知っているが、ngModelバインディングはFirebaseオブジェクトに参加していないと私は理由を理解することはできません。 Firebaseオブジェクトを手作りオブジェクトで置き換えようとしましたが、うまくいきました。助けてくれてありがとう！

Answer 1

FirebaseオブジェクトはObservableであり、プレーンなJSオブジェクトではないため、ngModelをそのまま適用することはできません。実際にはObservableを普通のオブジェクトに変換してみると、ngModelを使うことができます。

だから、最初の観測を取得し、それをサブスクライブ：あなたは直接オブジェクトを購読することができます場合は、今、より良いオプションは以下のようになり:)

で動作するようにプレーンなオブジェクトを持って

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

Firebaseを使用する必要はありませんが、これが動作するかどうかはわかりませんが、試してみてください：

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