使用ion-datetime值更改更新Firestore文档 [英] Update Firestore document with ion-datetime value change

问题描述

页面中有一个ion-datetime元素，我想在Firestore文档中更新其值.我想使用一个优雅，易于阅读和使用的解决方案，作为它的HTML标签事件.我使用了它的onChange事件.但是它会在每次页面加载时触发，并且在重新分配链接的变量时，页面的值(显然)会发生变化，这是由于如果我未在某处进行初始化而引发的 unssigned 错误，例如构造函数.

Having an ion-datetime element in a page, I would like to update its value in a Firestore document. I would like to use an elegant and easy to read and use solution, as its HTML tag events. I used its onChange event. But it triggers every time the page loads and its value (obviously) changes when the variable where it is linked is reassigned, due to the unassigned error that is thrown if I do not initialize it somewhere, such as the constructor.

我尝试了其他方法，但是我的想法已经用完了.

I tried other things, but I am running out of ideas.

所以，为了展示我所做的最好的事情，为了让你知道，这是:

So, for showing the best part I did, for having you informed, it was:

<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);
}

推荐答案

在Ionic框架中，您需要使用(ionChange)而不是(onChange)才能使其正常工作.

In Ionic framework you need to use (ionChange) instead of (onChange) in order for it to work.

但是，应该避免在用例场景中使用它，因为每次重新加载页面时，在object.date对象中更改值时总是会触发该值.基本上，您是在告诉他每次事件触发时保存该值.因此，可以在程序上更改object.date的值时触发该事件，也可以在用户通过选择其他日期来更改它时触发该事件.两种方式都会触发事件并调用函数.

However, you should avoid using it in your use case scenario, as it is always being triggered when a value is changed in object.date object as it is happening every time the page reloads. Basically you are telling him to save the value every time the event triggers. So the event can be triggered on pro grammatically changing the value of object.date or when user is changing it by selecting a different date. In each of the two ways the event will be triggered and the function will be called.

请改为使用[pickerOptions]，因为该文档已在 ion-datetime 文档中进行了记录.选择日期时，您可以具有自定义按钮.因此，仅当用户单击选项时，才会调用更新日期的功能.

Use [pickerOptions] instead, as it is documented in ion-datetime documentation. You can have custom buttons when selecting the date. So the function to update the date will be only called when the user click on the option.

<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"]，等等.

BUT, handler has its own scope, so you will not be able to get the value as this.object.date, so take the response from newTime and save the data from there. You can get the number of the day as newTime.day["text"], the number of the month as newTime.month["text"] etc.

这篇关于使用ion-datetime值更改更新Firestore文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！