角材料日期选择器拒绝工作

Question

我一直在努力使其工作近一个小时，但是我什么都没走，其他所有东西都工作正常，但是我只能从中得到白屏。 我同时通过StackOverflow和Github查看，但是找不到修复程序。

这是来自event-log.component.html

的代码

<mat-form-field appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

和event-log.component.ts中的代码

import { Component } from '@angular/core';

    @Component({
      selector: 'event-log',
      templateUrl: './event-log.component.html',
      styleUrls: ['./event-log.component.css']
    })
    export class EventLogComponent {
    
    }

"@angular/material": "^9.2.4"是我正在使用的棱角材料版本（取自package.json）

我完整的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import {MatExpansionModule} from '@angular/material/expansion'
import { FupAdmAccordionComponent } from './fup-adm-accordion/fup-adm-accordion.component';
import {MatCardModule} from '@angular/material/card';
import { AdmAccordionComponent } from './adm-accordion/adm-accordion.component';
import { OwnerAccordionComponent } from './owner-accordion/owner-accordion.component';
import { HomeScreenComponent } from './home-screen/home-screen.component';
import {MatPaginatorModule} from '@angular/material/paginator';
import { AppRoutingModule } from './app-routing.module';
import { MyProfileComponent } from './my-profile/my-profile.component';
import {MatFormFieldModule} from '@angular/material/form-field';
import { AboutComponent } from './about/about.component';
import { CheckoutPanelComponent } from './checkout-panel/checkout-panel.component';
import { ComparerComponent } from './comparer/comparer.component';
import { ControllUsersComponent } from './controll-users/controll-users.component';
import { MachinesComponent } from './machines/machines.component';
import { SearchPanelComponent } from './search-panel/search-panel.component';
import {MatInputModule} from '@angular/material/input';
import {MatTableModule} from '@angular/material/table';
import {MatSelectModule} from '@angular/material/select';
import { FupAdmHistoryComponent } from './fup-adm-history/fup-adm-history.component';
import {MatSortModule} from '@angular/material/sort';
import { AdminRelatedDrawingsComponent } from './admin-related-drawings/admin-related-drawings.component';
import {PortalModule} from '@angular/cdk/portal';
import {MatCheckboxModule} from '@angular/material/checkbox';
import { OwnerManageUsersComponent } from './owner-manage-users/owner-manage-users.component';
import { LogAccordionComponent } from './log-accordion/log-accordion.component';
import { AdminDeleteFromBaseComponent } from './admin-delete-from-base/admin-delete-from-base.component';
import { DialogBoxComponent } from './dialog-box/dialog-box.component';
import {MatDialogModule} from '@angular/material/dialog';
import { FupRangeComponent } from './fup-range/fup-range.component';
import { FupLibComponent } from './fup-lib/fup-lib.component';
import { EventLogComponent } from './event-log/event-log.component';
import { SystemLogComponent } from './system-log/system-log.component';
import {MatDatepickerModule} from '@angular/material/datepicker';


@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent,
    FupAdmAccordionComponent,
    AdmAccordionComponent,
    OwnerAccordionComponent,
    HomeScreenComponent,
    MyProfileComponent,
    AboutComponent,
    CheckoutPanelComponent,
    ComparerComponent,
    ControllUsersComponent,
    MachinesComponent,
    SearchPanelComponent,
    FupAdmHistoryComponent,
    AdminRelatedDrawingsComponent,
    OwnerManageUsersComponent,
    LogAccordionComponent,
    AdminDeleteFromBaseComponent,
    DialogBoxComponent,
    FupRangeComponent,
    FupLibComponent,
    EventLogComponent,
    SystemLogComponent,
    
  ],
  imports: [
    MatCardModule,
    MatExpansionModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    LayoutModule,
    FormsModule,
    MatDialogModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatPaginatorModule,
    AppRoutingModule,
    MatInputModule,
    MatTableModule,
    MatSelectModule,
    MatSortModule,
    PortalModule,
    MatCheckboxModule,
    MatDatepickerModule,
    

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

第一个答案

我认为一个问题是因为您忘记包括以下Angular模块：

• CommonModule

另外，其他模块确实很重要，因为如果模块B使用模块A，则无法在模块A之前导入模块B。

最后，AppRoutingModule应该是最后导入的内容。

看到https://stackblitz.com/edit/angular-ivy-ntmcpq中的代码后回答

似乎缺少一项进口：

您可以解决以下导入问题：

import { MatNativeDateModule } from '@angular/material/core';

在简历中

您app.module.ts应该是：

@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent,
    FupAdmAccordionComponent,
    AdmAccordionComponent,
    OwnerAccordionComponent,
    HomeScreenComponent,
    MyProfileComponent,
    AboutComponent,
    CheckoutPanelComponent,
    ComparerComponent,
    ControllUsersComponent,
    MachinesComponent,
    SearchPanelComponent,
    FupAdmHistoryComponent,
    AdminRelatedDrawingsComponent,
    OwnerManageUsersComponent,
    LogAccordionComponent,
    AdminDeleteFromBaseComponent,
    DialogBoxComponent,
    FupRangeComponent,
    FupLibComponent,
    EventLogComponent,
    SystemLogComponent,
    
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatNativeDateModule
    MatCardModule,
    MatExpansionModule,
    MatFormFieldModule,
    LayoutModule,
    MatDialogModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatPaginatorModule,
    MatInputModule,
    MatTableModule,
    MatSelectModule,
    MatSortModule,
    PortalModule,
    MatCheckboxModule,
    MatDatepickerModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

让我知道它现在是否可以工作。