2016-07-22 34 views
11

में बाध्यकारी तीन तरह से मैं AngularFire 2 (2.0.0-बीटा) का उपयोग करके Angular.js 2 (2.0.0-rc.4) में फ़ायरबेस डेटाबेस में इनपुट तत्व को तीन-तरफा बांधने की कोशिश कर रहा हूं। 2)।एंगुलर 2 और एंगुलरफायर 2

मैं एक बहुत ही सरल एचटीएमएल की तरह है:

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

कोड:

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

मेरी घटक में, बचाने के लिए और firebase को यह इनपुट के सामग्री को पुनः प्राप्त करने के लिए, मैं इस तरह एक कार्यान्वयन है उपरोक्त कार्यों में, जब मैं वास्तविक समय में कुछ टाइप करता हूं तो मैं फ़ायरबेस पर प्रारंभिक फायरबेस मूल्य और अद्यतन मान पढ़ने में सक्षम हूं।

लेकिन this.firebaseInitComplete के लिए जांचने के लिए मैन्युअल तर्क होने और परिवर्तनों को सुनने के लिए ngAfterViewInit जोड़ना थोड़ा गलत लगता है और मैं इसे काम करने के लिए बस हैक कर रहा हूं।

क्या कम तर्क वाले घटक के साथ तीन-तरफा बाध्यकारी का बेहतर कार्यान्वयन है?

+0

खुद को एक ही प्रश्न पूछना। इस सामान्य उपयोग मामले को रेखांकित करने वाले मौजूदा फायरबेस दस्तावेज़ में कोई उदाहरण नहीं दिखता है। :( –

+2

जब मैंने "तीन तरह बाध्यकारी" पढ़ा तो मुझे लगभग स्ट्रोक था:/ – Bolza

+0

यह मुझे एक दुखद पांडा बनाता है – leetheguy

उत्तर

7

सात महीने बाद और मैं .. आप के लिए एक जवाब .. बढ़ाया ngModel वाक्य रचना है

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

[] ब्लॉक एक गेटर है और() ब्लॉक एक सेटर है। चूंकि मॉडल का गेटटर वास्तव में FirebaseObjectObservable को खोल रहा है, इसलिए आपको इसे सेट करने के लिए फायरबेस ऑब्जेक्ट ऑब्सर्जेबल के बाध्यकारी का उपयोग करना होगा।

+0

धन्यवाद, मुझे इसकी आवश्यकता क्यों है, लेकिन आपको यह कहां मिला? घंटों के लिए googled, इतने छोटे दस्तावेज/उदाहरण होने के लिए आयनिक/फायरबेस कॉम्बो के लिए मिला – Ruben