Angular 2和Angularfire2中的三種方式綁定

我想在Angular.js 2（2.0.0-rc.4）中使用AngularFire 2（2.0.0-beta）將輸入元素綁定到firebase數據庫。 2）。Angular 2和Angularfire2中的三種方式綁定

我有一個非常簡單的HTML這樣的：

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

在我的組件，保存和檢索此輸入火力的內容，我有一個這樣的實現：

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來聽取更改感覺有點錯誤，我只是黑客它的工作。

是否有更好的三維綁定與較少的邏輯內部組件的實現？

來源

2016-07-22 Umut Benzer

問自己同樣的問題。現有Firebase文檔中似乎沒有任何示例說明這種非常常見的用例。 :( –

當我讀到「三路綁定」時，我幾乎有一箇中風：/ – Bolza

這使我成爲一隻悲傷的熊貓 – leetheguy

七個月後，我對你有一個答案..擴展ngModel語法..

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

的[]塊是一個getter和（）塊是二傳手。由於模型的getter實際上是展開FirebaseObjectObservable，所以您必須使用FirebaseObjectObservable的綁定來設置它。

來源

2017-03-05 20:38:37

謝謝這就是爲什麼我需要，但你在哪裏找到這個？Google搜索了幾個小時，很少的文檔/例子是找到離子/ firebase組合 – Ruben

Angular 2和Angularfire2中的三種方式綁定

回答

相關問題