使用 ion-datetime 值更改更新 Firestore 文档

Posted 2023-03-13

【中文标题】使用 ion-datetime 值更改更新 Firestore 文档

【英文标题】：Update Firestore document with ion-datetime value change

【发布时间】：2020-02-04 04:19:45

【问题描述】：

在页面中有 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);

【参考方案1】：

在 Ionic 框架中，您需要使用 (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"]等。

【讨论】：

非常感谢。这对我非常有用。我必须说，即使在阅读您的答案之前，我也没有看到官方文档。此外，您的回答很好地解释了它是如何工作的。干杯。