渲染angular2-日期选择器

Question

我认为这个问题可能会在不了解小部件的情况下得到解决。在我的应用程序中，我使用angular2-datetime选择器(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

下面是stackblitz的一个工作示例，

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文件(Iam和你提到的一样)，

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

输出截图，

​

​

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