Angular 2 和 Angularfire2 中的三向绑定

Posted 2023-02-19

【中文标题】Angular 2 和 Angularfire2 中的三向绑定

【英文标题】：Three way binding in Angular 2 and Angularfire2

【发布时间】：2016-11-26 01:31:50

【问题描述】：

我正在尝试使用 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://***.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 来监听变化感觉有点不对劲，我只是在破解它来工作。

有没有更好的三向绑定实现，组件内部的逻辑更少？

【问题讨论】：

问自己同样的问题。现有的 Firebase 文档中似乎没有任何示例概述这个非常常见的用例。 :(

当我读到“三向绑定”时，我几乎中风了：/

这让我变成了一只悲伤的熊猫

【参考方案1】：

七个月后，我有一个答案给你.. 扩展 ngModel 语法..

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

[] 块是 getter， () 块是 setter。由于模型的 getter 实际上是展开 FirebaseObjectObservable，因此您必须使用 FirebaseObjectObservable 的绑定来设置它。

【讨论】：

谢谢，这就是我需要的原因，但你在哪里找到的？谷歌搜索了几个小时，几乎找不到 ionic/firebase 组合的文档/示例

你拯救了我的一天！对我来说有点不同：[ngModel]="(product|async)?.quantity" (ngModelChange)="productRef.update(quantity: $event)" 其中：productRef = this.db.object() product = productRef.valueChanges() @angular/fire 版本 5.4.2