使用 ion-datetime 的自定义 Angular 组件如果不受影响则无法正常运行

Question

我构建了一个具有双向绑定的自定义角度日期选择器组件（它从 firestore 获取值，如果用户修改它，它会更新到 firestore）。

这是我的 HTML

<ion-item>
  <ion-list>
    <ion-item id="{{'open-date-' + pickerId}}">
      <ion-label>{{label}}</ion-label>
      <ion-note slot="end">{{selectedDate | date: 'HH:mm'}}</ion-note>
    </ion-item>
    <ion-modal trigger="{{'open-date-' + pickerId}}" [cssClass]="'bottom-end'">
      <ng-template>
        <ion-datetime
          presentation="time"
          [(ngModel)]="selectedDate"
          (ionChange)="onDateChange(selectedDate)"
          size="cover"
          [showDefaultButtons]="true"
          cancelText="Annuler"
          doneText="Valider"
          minuteValues="0,15,30,45">
        </ion-datetime>
      </ng-template>
    </ion-modal>
  </ion-list>
</ion-item>

这是我的TS

import { Component, OnInit, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-datetime-picker',
  templateUrl: './datetime-picker.component.html',
  styleUrls: ['./datetime-picker.component.scss'],
})
export class DatetimePickerComponent implements OnInit {
  @Input() pickerId?: string;
  @Input() label?: string;
  @Input() selectedDate: Date = new Date();
  @Output() selectedDateChange = new EventEmitter<Date>();

  constructor() { }

  ngOnInit() {}

  onDateChange(newDate: Date): void {
    console.log('onDateChange', newDate);
    this.selectedDate = newDate;
    this.selectedDateChange.emit(this.selectedDate);
  }
}

不幸的是，它仅在我单击日期并使用“滚动”时间选择器然后验证时才有效。 如果我只是打开并单击验证，我想用当前时间（打开时间选择器时的默认值）更新 firestore 值，这是一个未定义的日期。

我尝试使用setter和getter，我尝试使用ngModelChange，以及更多解决方案，但问题仍然是完全相同的。

Answer 1

如何使用

ionFocus

事件并设置当前时间并发出事件

html

<ion-item>
  <ion-list>
    <ion-item id="{{'open-date-' + pickerId}}">
      <ion-label>{{label}}</ion-label>
      <ion-note slot="end">{{selectedDate | date: 'HH:mm'}}</ion-note>
    </ion-item>
    <ion-modal trigger="{{'open-date-' + pickerId}}" [cssClass]="'bottom-end'">
      <ng-template>
        <ion-datetime
          presentation="time"
          [(ngModel)]="selectedDate"
          (ionChange)="onDateChange(selectedDate)"
          (ionFocus)="onDatePickerFocus()"
          size="cover"
          [showDefaultButtons]="true"
          cancelText="Annuler"
          doneText="Valider"
          minuteValues="0,15,30,45">
        </ion-datetime>
      </ng-template>
    </ion-modal>
  </ion-list>
</ion-item>

ts

import { Component, OnInit, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-datetime-picker',
  templateUrl: './datetime-picker.component.html',
  styleUrls: ['./datetime-picker.component.scss'],
})
export class DatetimePickerComponent implements OnInit {
  @Input() pickerId?: string;
  @Input() label?: string;
  @Input() selectedDate: Date = new Date();
  @Output() selectedDateChange = new EventEmitter<Date>();

  constructor() { }

  ngOnInit() {}

  onDateChange(newDate: Date): void {
    console.log('onDateChange', newDate);
    this.selectedDate = newDate;
    this.selectedDateChange.emit(this.selectedDate);
  }

  onDatePickerFocus(): void {
    console.log('onDatePickerFocus', newDate);
    if(!this.selectedDate) {
        this.selectedDate = new Date();
    }
    this.selectedDateChange.emit(this.selectedDate);
  }
}