Angular2 Ng日期时间选择器打开时太大

我正在使用Ng日期时间选择器，Angular2前端来自： 我尝试从这里复制并粘贴示例：

进入我的组件html文件。我正在使用ngx管理模板

但是，当我启动我的组件并在输入字段内单击以打开日期选择器时，布局有点“混乱”，并且在左侧的窗口中过大（请参见屏幕截图）：

但是我在我的代码中没有看到任何错误。。。这是我的模板：

 <label class="example-input-wrapper">
    Date Time:
    <input placeholder="Date Time:"
           [(ngModel)]="dateTime"
           [owlDateTimeTrigger]="dt" [owlDateTime]="dt">
    <owl-date-time #dt></owl-date-time>
</label>

app.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexibilitiesComponent } from './flexibilities.component';
import { ThemeModule } from '../../@theme/theme.module';
import { NgxEchartsModule } from "ngx-echarts";
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { DlDateTimePickerDateModule } from 'angular-bootstrap-datetimepicker';
import { AngularDateTimePickerModule } from 'angular2-datetimepicker';
import { NguiDatetimePickerModule } from '@ngui/datetime-picker';
import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
import { MomentModule } from 'angular2-moment';


@NgModule({
  imports: [
    CommonModule,
    ThemeModule,
    NgxEchartsModule,
    NgxChartsModule,
    DlDateTimePickerDateModule,
    AngularDateTimePickerModule,
    NguiDatetimePickerModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    MomentModule,
  ],
  declarations: [FlexibilitiesComponent] 
})
export class FlexibilitiesModule { }

在stackblitz，他们使用了更多的模块，但我不知道它们是特定于应用程序的还是运行日期时间选择器所必需的…：

import { BasicComponent } from './basic/basic.component';
import { StandAloneComponent } from './stand-alone/stand-alone.component';
import { RangeComponent } from './range/range.component';
import { StartViewComponent } from './start-view/start-view.component';
import { ValidationComponent } from './validation/validation.component';
import { RestrictionComponent } from './restriction/restriction.component';
import { LocalizationComponent } from './localization/localization.component';
import { MomentJsComponent } from './moment-js/moment-js.component';

有没有办法解决这个问题？

试试这个解决方案：

添加

@import“~ng pick datetime/assets/style/picker.min.css”

在style.scss中添加

@import“~ng pick datetime/assets/style/picker.min.css”

在
src
文件夹中的styles.scss中

如果没有这个，可以在angular.json中定义它

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    ...
      "architect": {
        "build": {
          ...
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
           ]}
            ...
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            ...
}

嗯，我的ngx管理模板中没有global style.css…我在组件的css文件中添加了它，但它也不起作用：（找到“src/app/@theme/styles/styles.scss”并尝试导入一个巨大的thx，这确实解决了我的问题：）除了。。。我还可以在那里添加其他任意常规样式，如角度材质样式模板吗？或者normalize.css？
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    ...
      "architect": {
        "build": {
          ...
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
           ]}
            ...
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.scss"
            ],
            ...
}