Обновление документа Firestore с изменением значения ion-datetime

Question

Имея элемент ion-datetime на странице, я хотел бы обновить его значение в документе Firestore. Я хотел бы использовать элегантное и легкое для чтения и использования решение, как его HTML-тег событий. Я использовал его onChange событие. Но он срабатывает каждый раз, когда страница загружается, и ее значение (очевидно) изменяется, когда переменная, с которой она связана, переназначается из-за ошибки unassigned , которая выдается, если я не инициализирую ее где-то, например,Конструктор.

Я пробовал другие вещи, но у меня заканчиваются идеи.

Итак, для того, чтобы показать лучшую часть, которую я сделал, для того, чтобы вы сообщили, это было:

<ion-datetime
    display-format="D MMMM YYYY"
    [(ngModel)]="object.date"
    (onChange)="changeDate()">
</ion-datetime>

private docId: string;

constructor(private aRoute: ActivatedRoute, private angularFirestore: AngularFirestore) { }

ionViewWillEnter() { this.docId = this.aRoute.snapshot.paramMap.get('id'); }

private changeDate(): void {
    const partial: Partial<Type> = {date: this.object.date};
    this.angularFirestore.collection('type').doc<Type>(this.id).update(partial);
}

Answer 1

В Ionic Framework вам нужно использовать (ionChange) вместо (onChange), чтобы он работал.

Однако вам следует избегать его использования в сценарии использования, так как он всегда запускаетсякогда значение изменяется в object.date объекте, как это происходит при каждой перезагрузке страницы. По сути, вы говорите ему сохранять значение каждый раз, когда происходит событие. Таким образом, событие может быть вызвано программным изменением значения object.date или когда пользователь меняет его, выбирая другую дату. В каждом из двух способов событие будет вызвано, и будет вызвана функция.

Используйте взамен [pickerOptions], как это описано в документации ion-datetime . Вы можете иметь пользовательские кнопки при выборе даты. Таким образом, функция обновления даты будет вызываться только тогда, когда пользователь нажимает на эту опцию.

Рабочий пример:

В HTML:

<ion-item>
  <ion-label possition="floating">Choose date:</ion-label>
  <ion-datetime
    display-format="D MMMM YYYY"
    [(ngModel)]="object.date"
    [pickerOptions]="customPickerOptions"> //Replaced this part (ionChange)=""
  </ion-datetime>
</ion-item>

В TS:

  customPickerOptions: any;

  constructor() {

      this.customPickerOptions = {
        buttons: [{
          text: 'Save',
          handler: newTime => console.log("Saving date in Firestore ...");
        }]
      }

  }

НО, handler имеет собственную область видимости, поэтому вы не сможете получить значение как this.object.date, поэтому возьмите ответ из newTime и сохраните данные оттуда. Вы можете получить номер дня как newTime.day["text"], номер месяца как newTime.month["text"] и т. Д.