我正在尝试使用AngularFire 2(2.0.0-beta.2)将输入元素三路绑定到Angular.js 2(2.0.0-rc.4)中的firebase数据库。
我有一个非常简单的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的初始值和更新值。
但是,使用手动逻辑来检查this.firebaseInitComplete
并添加ngAfterViewInit
来监听更改会感觉有点不对,而我只是将其用于工作。
是否有更好的三向绑定实现,组件内的逻辑更少?
答案 0 :(得分:8)
七个月后,我有一个答案..扩展的ngModel语法..
<input [ngModel]='(model|async)?.author' (ngModelChange)="model.update({author: $event})">
[]块是一个getter而()块是一个setter。由于模型的getter实际上是展开FirebaseObjectObservable,因此您必须使用FirebaseObjectObservable的绑定来设置它。