NG-Zorro - 日期选择器日历未显示

Question

我目前正在做我的大学期末项目，但我陷入了困境。我正在创建一个用于健身跟踪的 Web 应用程序，在其中一个子页面上，用户应该能够输入有关其活动的信息。在表单的最后一行，他们应该能够通过日期选择器输入日期，但小日历图标没有显示。输入所有信息后，表单下方的按钮应该可以点击，但我尝试了没有日期部分的情况，但仍然不起作用。

有人知道为什么吗？

谢谢！

<div>

    <div nz-row>
        <h1 nz-card-grid [ngStyle]="gridStyle">Activity</h1>
    </div>

    <div nz-row>
        <div nz-col nzFlex="2">
            <nz-card nzType="inner" style="margin-top: 16px;" nzTitle="Post New Activity">
                <form nz-form [formGroup]="activityForm" class="custom-form">
                    <nz-form-item>
                        <nz-form-control nzErrorTip="Please input the calories!">
                            <input type="text" nz-input formControlName="caloriesBurned"
                                placeholder="Enter the calories you burned" />
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item>
                        <nz-form-control nzErrorTip="Please input the distance!">
                            <input type="number" nz-input formControlName="distance"
                                placeholder="Enter distance" />
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item>
                        <nz-form-control nzErrorTip="Please input the steps!">
                            <input type="number" nz-input formControlName="steps"
                                placeholder="Enter steps" />
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item>
                        <nz-form-control nzErrorTip="Please input the date">
                            <nz-date-picker style="width: 100%;" formControlName="date"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>

                    <button nz-button nzType="primary" nzBlock class="w-100" [disabled]="activityForm.invalid">
                        Post Activity
                    </button>
                </form>

            </nz-card>
        </div>
        <div nz-col nzFlex="3" style="margin-left: 20px;">

        </div>
    </div>
</div>

我尝试以多种方式更改它，甚至从他们的网站复制日期选择器的 NG-Zorro 示例代码，但日历仍然没有显示。

这是在 StackBlitz 上创建的错误： https://stackblitz.com/github/Matevic/Final-Project?embed=1&file=src%2Fapp%2Fcomponents%2Factivity%2Factivity.component.html

Answer 1

您不应在

bootstrap: [ AppComponent ]

中添加

SharedModule

。因为这旨在用于将组件设置为通常在根模块中使用的入口应用程序。

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    DemoNgZorroAntdModule,
    FormsModule,
    ReactiveFormsModule,
    RouterLink,
    RouterOutlet,

  ],
  exports:[
    CommonModule,
    DemoNgZorroAntdModule,
    FormsModule,
    ReactiveFormsModule,
    RouterLink,
    RouterOutlet,
  
  ],
  providers: [provideHttpClient()],
  //bootstrap: [ AppComponent ] <-- Remove this
})
export class SharedModule { }