2016-07-22 33 views
11

AngularFire 2 (2.0.0-beta) kullanarak, bir girdi elemanını Angular.js 2 (2.0.0-rc.4) 'de firebase veritabanına üç yollu olarak bağlamaya çalışıyorum. 2). Angular 2 ve AngularFire2'de üç yönlü ciltleme

Ben gibi çok basit bir html var:

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; 
    }); 
    }  
} 

kodu:

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

, kaydetmek ve Firebase bu girişin içeriğini almak için, böyle bir uygulama var Çalışmalar üzerinde, kullanıcı gerçek zamanlı olarak bir şey yazdığında, firebase'in başlangıç ​​firebase değerini ve güncelleme değerini okuyabiliyorum.

this.firebaseInitComplete'u kontrol etmek ve ngAfterViewInit eklemek için manuel bir mantıkla değişiklik yapmak biraz yanlış geliyor ve ben de işe yarıyor.

İçerideki daha az mantıkla üç yollu bağlamanın daha iyi bir uygulaması var mı?

+0

Kendime aynı soruyu soruyorum. Bu çok yaygın kullanım durumunu gösteren mevcut Firebase belgelerinde herhangi bir örnek görünmemektedir. :( –

+2

"Üç yollu bağlama" okuduğumda neredeyse bir inme geçirdim:/ – Bolza

+0

bu bana üzgün bir panda – leetheguy

cevap

7

Yedi ay sonra ve

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

[] blok, bir alıcı ve() bloğu setter olduğunu .. sizin için bir cevap .. genişletilmiş ngModel sözdizimi var. Modelin alıcısı aslında FirebaseObjectObservable'ı kaldırdığından, bunu ayarlamak için FirebaseObjectObservable'ın bağlayıcısını kullanmanız gerekir.

+0

yapmamı sağladı çünkü bu yüzden neye ihtiyacım vardı, ama bunu nerede buldun? Saatlerce dokundu, çok az dokümantasyon/örnekler iyonik/firebase combo bulundu – Ruben