所以我有一个DatePicker可以更改某个字段,但我希望它只在用户确认更改时才更新HTML.
但是,目前,当我在ion-datetime元素中使用(ionChange)事件时,它会在我的确认警告弹出之前自动更新UI.

如何才能使我的日期选择器中的值仅在用户按下确认时更改？

updateStartTime(startTime) {
    let alert = this.alertControl.create({
        title: 'Change start time',
        message: 'Are you sure you want to update the start time for this event?',
        buttons: [{
            text: 'Cancel',
            handler: () => {
                console.log('cancel');
            }
        }, {
            text: 'Confirm',
            handler: () => {
                console.log(startTime);
            }
        }]
    });
    alert.present();
}

<ion-item detail-push>
    <ion-label><b>Start: </b></ion-label>
    <ion-datetime displayFormat="hh:mm A"
                  [(ngModel)]="item.EventStart"
                  (ionChange)="updateStartTime(item.EventStart)"></ion-datetime>
</ion-item>

解决方法:

你可以通过保留EventStart的旧值来做一个技巧.我添加了两个代码示例.第一个将更新HTML,但只有点击确认才会保留更新的值,否则它会将DatePicker设置为旧值.第二个将按预期工作但我不知道你的item.EventStart的值是什么样的.我猜它会类似于这种模式’00：00′.样本代码比单词:)中的解释更值得.

第一

  public oldEventStart = this.item.EventStart;
  updateStartTime(startTime) {
    let alert = this.alertControl.create({
      title: 'Change start time',
      message: 'Are you sure you want to update the start time for this event?',
      buttons: [
        {
          text: 'Cancel',
          handler: () => {
            this.item.EventStart = this.oldEventStart;
            console.log('cancel');
          }
        },
        {
          text: 'Confirm',
          handler: () => {
            this.item.EventStart = startTime;
            this.oldEventStart = startTime;
            console.log(startTime);
          }
        }
      ]
    });
    alert.present();
    alert.onDidDismiss(() => { this.item.EventStart = this.oldEventStart; });
  }

第二个

 public oldEventStart = this.item.EventStart;
  updateStartTime(startTime) {
    this.item.EventStart = new Date('2000-01-01T'+this.oldEventStart+':00.00').toISOString();
    let alert = this.alertControl.create({
      title: 'Change start time',
      message: 'Are you sure you want to update the start time for this event?',
      buttons: [
        {
          text: 'Cancel',
          handler: () => {
            this.item.EventStart = this.oldEventStart;
            console.log('cancel');
          }
        },
        {
          text: 'Confirm',
          handler: () => {
            this.item.EventStart = startTime;
            this.oldEventStart = startTime;
            console.log(startTime);
          }
        }
      ]
    });
    alert.present();
    alert.onDidDismiss(() => { this.item.EventStart = this.oldEventStart; });
  }

希望这有助于解决您的问题.干杯！.