角度 9 ng 选择日期时间日期时间选择器未打开并给出错误

Question

我最近将我的应用程序代码从 Angular 8 迁移到了 Angular 9。我在 Angular 8 中使用了 ng-pick-datetime。但它不适用于 Angular 9。给定的是我的模块代码：-

import { AppCodeComponent } from "./app-code.component";
import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS, DateTimeAdapter, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime-ex';
import { MomentDateTimeAdapter } from 'ng-pick-datetime-moment';
export const MY_CUSTOM_FORMATS = {
fullPickerInput: 'DD MMM YYYY',
datePickerInput: 'DD MMM YYYY',
timePickerInput: 'LT',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY'
};

@NgModule( {
imports: [
CommonModule,
HttpClientModule,
FormsModule,
OwlDateTimeModule,
OwlNativeDateTimeModule,
DynamicComponentLoaderModule.forChild( AppCodeComponent )
],
declarations: [AppCodeComponent],
providers: [{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }, DatePipe,
{ provide: DateTimeAdapter, useClass: MomentDateTimeAdapter, deps: [OWL_DATE_TIME_LOCALE] },
{ provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS }]
} )
export class AppCodeModule { }

当我尝试启动我的应用程序时，日期时间选择器没有打开，当我检查控制台时，我看到以下错误：-

ERROR TypeError: this.dtPicker.registerInput is not a function
at OwlDateTimeInputDirective.push../node_modules/ng-pick-datetime-ex/__ivy_ngcc__/fesm5/ng-pick-datetime-ex.js.OwlDateTimeInputDirective.registerDateTimePicker (ng-pick-datetime-ex.js:4176)
at OwlDateTimeInputDirective.set [as owlDateTime] (ng-pick-datetime-ex.js:3842)
at setInputsForProperty (core.js:9026)
at elementPropertyInternal (core.js:8091)
at ɵɵproperty (core.js:14452)
at ViewExpensesComponent_div_40_Template (view-expenses.component.html:222)
at executeTemplate (core.js:7706)
at refreshView (core.js:7583)
at refreshDynamicEmbeddedViews (core.js:8675)
at refreshView (core.js:7603)
ERROR TypeError: Cannot read property 'subscribe' of undefined
at OwlDateTimeInputDirective.push../node_modules/ng-pick-datetime-ex/__ivy_ngcc__/fesm5/ng-pick-datetime-ex.js.OwlDateTimeInputDirective.ngAfterContentInit (ng-pick-datetime-ex.js:4038)
at callHook (core.js:2951)
at callHooks (core.js:2921)
at executeInitAndCheckHooks (core.js:2873)
at refreshView (core.js:7620)
at refreshDynamicEmbeddedViews (core.js:8675)
at refreshView (core.js:7603)
at refreshComponent (core.js:8739)
at refreshChildComponents (core.js:7376)
at refreshView (core.js:7629)

我ng-pick-datetime更改为ng-pick-datetime-exng-pick-datetime因为它不起作用并给出相同的错误。任何帮助将不胜感激。

Answer 1

回答晚了，但我在尝试从 Angular 8 更新到 Angular 9 时也遇到了这个问题，发现 ng-pick-datetime(这里是关于 Github 链接的讨论(已被其创建者放弃，不支持角常春藤。
不用担心，有一个新的分叉/更新版本应该兼容并具有相同的功能。

Answer 2

我已经确定了我的问题。我没有正确使用角度元素。我所做的是：-

<div id="ems_view_endDate_div" class="secondary-border">
<input #endDate type="text" [readonly]="true"
style="cursor: pointer; border: none; height: 25px; text-align: center; font-size: small; box-shadow: 0 0 0 0 white !important;" 
placeholder="DD MMM YYYY" class="datepicker" 
[(ngModel)]="endDateVal" 
id="ems_view_endDate" 
[owlDateTimeTrigger]="endDate" [owlDateTime]="endDate">
<owl-date-time (afterPickerOpen)="endDateOpened()" 
(afterPickerClosed)="endDateClosed();updateFilterDate(constants.ENDDATE)" 
[pickerType]="'calendar'" #endDate></owl-date-time>
</div>

问题是我用了两次#endDate。后来我只是做了以下事情：-

<div id="ems_view_endDate_div" class="secondary-border">
<input #endDate type="text" [readonly]="true"
style="cursor: pointer; border: none; height: 25px; text-align: center; font-size: small; box-shadow: 0 0 0 0 white !important;" 
placeholder="DD MMM YYYY" class="datepicker" 
[(ngModel)]="endDateVal" 
id="ems_view_endDate" 
[owlDateTimeTrigger]="endDateTrigger" [owlDateTime]="endDateTrigger">
<owl-date-time (afterPickerOpen)="endDateOpened()" 
(afterPickerClosed)="endDateClosed();updateFilterDate(constants.ENDDATE)" 
[pickerType]="'calendar'" #endDateTrigger></owl-date-time>
</div>

我将猫头鹰日期时间角度元素从#endDate更改为#endDateTrigger，并在[owlDateTimeTrigger]和[owlDateTime]中使用相同的元素。这解决了我的问题。但我仍然不明白为什么我早期的代码在 Angular 8 中工作。我想谷歌已经让Angular 9变得更强大了。