Подтвердить что ты не робот

Трехстороннее связывание в Angular 2 и Angularfire2

Я пытаюсь выполнить трехстороннюю привязку входного элемента к базе данных firebase в Angular.js 2 (2.0.0-rc.4), используя AngularFire 2 (2.0.0-beta.2).

У меня очень простой 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/info/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 для прослушивания изменений кажется немного неправильным, и я просто взламываю его на работу.

Существует ли лучшая реализация трехсторонней привязки с меньшим логическим внутренним компонентом?

4b9b3361

Ответ 1

Семь месяцев спустя, и у меня есть ответ для вас.. расширенный синтаксис ngModel..

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

Блок [] - это геттер, а() - сеттер. Поскольку модель getter фактически разворачивает FirebaseObjectObservable, вы должны использовать привязку FirebaseObjectObservable для ее установки.