Łączenie w trzech kierunkach w Angular 2 i Angularfire2

Question

Próbuję powiązać trójstronnie element wejściowy z bazą danych bazy danych Fireplace w Angular.js 2 (2.0.0-rc.4), używając AngularFire 2 (2.0.0-beta. 2).

Mam bardzo prosty html jak:

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

W moim komponentu, aby zapisać i pobrać zawartość tego wejścia do Firebase mam implementację takiego:

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

Kod powyżej działa, jestem w stanie odczytać początkową wartość bazy ogniowej i zaktualizować wartość w bazie firebase, gdy użytkownik coś pisze w czasie rzeczywistym.

Ale po ręcznej logice, aby sprawdzić this.firebaseInitComplete i dodanie ngAfterViewInit, aby słuchać zmian, czuje się trochę źle i jestem po prostu hackowanie go do pracy.

Czy istnieje lepsza implementacja wiązania trójstronnego z mniejszą logiką wewnątrz komponentu?

Answer 1

Siedem miesięcy później i mam dla ciebie odpowiedź .. rozszerzone składni ngModel ..

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

przycisk [] Blok jest przebojowa i() blok jest seter. Ponieważ pobierający model faktycznie rozpakowuje FirebaseObjectObservable, musisz użyć wiązania FirebaseObjectObservable, aby je ustawić.