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

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


person Umut Benzer    schedule 22.07.2016    source источник
comment
Задаюсь тем же вопросом. Похоже, в существующей документации Firebase нет примеров, описывающих этот очень распространенный вариант использования. :(   -  person Brian A Bird    schedule 02.01.2017
comment
Когда я прочитал трехстороннее связывание, у меня чуть не случился инсульт :/   -  person Bolza    schedule 02.02.2017
comment
это делает меня грустной пандой   -  person leetheguy    schedule 23.02.2017


Ответы (1)


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

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

Блок [] является геттером, а блок () — сеттером. Поскольку геттер модели фактически разворачивает FirebaseObjectObservable, для его установки необходимо использовать привязку FirebaseObjectObservable.

person Jon Thompson    schedule 05.03.2017
comment
спасибо, вот зачем мне это нужно, но где ты это нашел? гуглил часами, так что мало документации/примеров можно найти для комбинации ionic/firebase - person Ruben; 21.07.2017
comment
Вы спасли мой день! У меня немного по-другому: [ngModel]="(product|async)?.quantity" (ngModelChange)="productRef.update({quantity: $event})" где: productRef = this.db.object() product = productRef.valueChanges() @angular/fire версия 5.4.2 - person Andrey Klochkov; 03.05.2020