AngularFire 2とAngularfire2の3ウェイバインディング

Question

AngularFire 2（2.0.0-beta）を使用して、Angular.js 2（2.0.0-rc.4）で入力要素をfirebaseデータベースに3方向バインドしようとしています。 2）。

私は非常に単純なHTMLのような持っている：私のコンポーネントで

<form (ngSubmit)="onSubmit()" #commentForm="ngForm"> 
    <input [(ngModel)]="model.author" type="input" name="author" required> 
</form> 

、firebaseにこの入力内容を保存し、取得するために、私はこのような実装を持っている：

export class CommentFormComponent implements OnInit, AfterViewInit { 
    @ViewChild("commentForm") form; 
    // http://stackoverflow.com/questions/34615425/how-to-watch-for-form-changes-in-angular-2 

    firebaseInitComplete = false; 
    model: Comment = new Comment("", ""); 
    firebaseForm: FirebaseObjectObservable<Comment>; 

    constructor(private af: AngularFire) { } 

    ngAfterViewInit() { 
    this.form.control.valueChanges 
     .subscribe(values => { 
     // If we haven't get the initial value from firebase yet, 
     // values will be empty strings. And we don't want to overwrite 
     // real firebase value with empty string on page load 
     if (!this.firebaseInitComplete) { return; } 

     // If this is a change after page load (getting initial firebase value) update it on firebase to enable 3-way binding 
     this.firebaseForm.update(values); 
     }); 
    } 

    ngOnInit() { 
    this.firebaseForm = this.af.database.object("/currentComment"); 
    // Listen to changes on server 
    this.firebaseForm.subscribe(data => { 
     this.firebaseInitComplete = true; // Mark first data retrieved from server 
     this.model = data; 
    }); 
    }  
} 

コード上記の作品では、ユーザーがリアルタイムで何かを入力すると、firebaseの初期値を読み取り、firebaseの値を更新することができます。

this.firebaseInitCompleteを確認し、ngAfterViewInitを追加して変更を待ち受ける手動ロジックを使用すると、ちょっと間違っていると感じています。私はちょうどそれを動作させるためにハッキングしています。

コンポーネント内部の論理が少ない3ウェイバインディングの実装が改善されていますか？

Answer 1

7ヶ月後、私は

<input [ngModel]='(model|async)?.author' (ngModelChange)="model.update({author: $event})"> 

[]ブロックはゲッターで、（）ブロックはセッターです..あなたのための答え...拡張ngModel構文を持っています。モデルのゲッタはFirebaseObjectObservableのアンラップを実際に行っているので、FirebaseObjectObservableのバインディングを使用して設定する必要があります。