相关疑难解决方法(0)

我已经在我的 app.module.ts 文件中导入了 matdatepicker，但它仍然显示一些错误。我无法让材料组件工作。按钮工作正常并使用角材料组件。但是当我使用 datepicker 时它不起作用。

app.module.ts 文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import{ HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatTableModule} from '@angular/material/table';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatButtonModule} from '@angular/material/button';
import {MatFormFieldModule} from '@angular/material/form-field';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { InactiveusersComponent } from './component/inactiveusers/inactiveusers.component';
import { CalendarComponent } from './component/calendar/calendar.component';
import { InactiveItemComponent } from './component/inactive-item/inactive-item.component';
import { NewtableComponent } from './component/newtable/newtable.component'; …

我正在尝试创建一个表单，其中包含两个使用 Angular Material 的开始/结束日期日期选择器。由于某种原因，当我在对话框窗口的表单内添加日期选择器时，对话框的布局未正确呈现，正如从图像中可以看到的那样。这可能是什么原因造成的？

模板：

<div class="consumption-form">
    <form [formGroup]="consumptionControl" id="consumptionForm">
        <p class="consumption-field">
            <mat-form-field hintLabel="Max 10 characters" appearance="fill">
                <mat-label>BGpoint</mat-label>
                <input matInput #BGpoint maxlength="10" placeholder="BG5521900640000000000000001668712" formControlName="BGpointControl">
                <mat-error>
                    <span *ngIf="consumptionControl?.controls.BGpointControl?.errors?.pattern">Field should contain 10 numeric
          characters!</span>
                </mat-error>
                <mat-hint align="end">{{BGpoint.value?.length || 0}}/10</mat-hint>
            </mat-form-field>
        </p>
        <p class="consumption-field">
            <mat-form-field appearance="fill">
                <mat-label>Choose a start date</mat-label>
                <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
        </p>

        <button mat-raised-button type="submit" (click)="submit(BGpoint) " mat-icon-button matTooltip="Click to search for results " [matTooltipPosition]="position.value " [matTooltipShowDelay]="500
                " [matTooltipHideDelay]="500">
            <mat-icon aria-label="Search button icon ">search</mat-icon> …