渲染angular2-datetimepicker

Question

我认为这个问题可以在不必了解小部件的情况下解决。我在我的应用中为日历使用angular2-datetimepicker（https://www.npmjs.com/package/angular2-datetimepicker）。这些文档非常简单明了，尽管他们总是忘记了如何使它适用于所有人。我遇到控制台错误，必须将name属性以及ngDefaultControl添加到标签中，如下所示：

<angular2-date-picker [(ngModel)]="date" [settings]="settings" name="angular-calendar" ngDefaultControl></angular2-date-picker>

该组件对模型的引用及其文档中所述的设置：

    date: Date = new Date();
    settings = {
        bigBanner: true,
        timePicker: false,
        format: 'dd-MM-yyyy',
        defaultOpen: true
    }

检查该元素时，我发现该小部件在正常工作，但未显示：

<angular2-date-picker _ngcontent-c1="" name="angular-calendar" ngdefaultcontrol="" ng-reflect-name="angular-calendar" ng-reflect-model="Mon Jul 02 2018 11:59:53 GMT+0" class="ng-untouched ng-pristine ng-valid"></angular2-date-picker>

在检查影响元素的CSS时，我发现没有适用的特定规则。任何收入都将得到赞赏。

Answer 1

这是一个可行的示例堆叠闪电战，

https://stackblitz.com/edit/angular-mmq3ng 安装命令，

npm install angular2-datetimepicker --save

导入app.module.ts文件//也许错误没有导入到您的应用程序中。

import { AngularDateTimePickerModule } from 'angular2-datetimepicker';

@NgModule({
  imports: [
    AngularDateTimePickerModule,
  ]
})

打字稿文件

export class AppComponent {    
    date: Date = new Date();
    settings = {
        bigBanner: true,
        timePicker: false,
        format: 'dd-MM-yyyy',
        defaultOpen: true
    }
    constructor(){}    
}

HTML文件（我使用的内容与您提到的相同）

<angular2-date-picker [(ngModel)]="date" [settings]="settings" name="angular-calendar" ngDefaultControl></angular2-date-picker>

输出屏幕截图，

确保必须导入app.module.ts文件AngularDateTimePickerModule此模块。