无法在角度组件中设置mat-datepicker

Question

将应用程序从 ng 15（我认为）迁移到 18。 我对日期选择器组件感到头疼。 我已经删除了我的实现（带有绑定）并替换为教程（角度大学）中的实现。

我一直点击“错误类型错误：i 为空”。 如果我在模板中删除对 mat-datepicker 的任何引用，我就不会收到该错误。

所以我怀疑这与我的组件/项目设置和导入内容不正确有关。

在我迁移到 ng 18 的过程中，我最终向 main.ts 添加了一些东西（甚至可能添加了该文件），我最终在其中导入了模块以及组件，我怀疑我没有被需要。

那么3个问题：

• 追踪对我来说不太具有描述性的错误的最佳方法是什么（我理解空变量，但没有指示什么是空）？
• 我的日期选择器设置做错了什么？
• 我需要在组件中导入并在 main.ts 中导入模块吗？

我的组件.ts：

@Component({
    selector: 'app-edit',
    templateUrl: './edit.component.html',
    styleUrls: ['./edit.component.scss'],
    standalone: true,
    imports: [MatFormField, MatHint, MatLabel, MatInput, FormsModule,
              MatDatepicker, MatDatepickerInput, MatDatepickerToggle,
              MatSuffix,
              MatTabGroup, MatTab, NgFor, ExaminerComponent, RefereeComponent, MatButton]
})
export class MyComponent implements OnInit {@Component({
    selector: 'app-component',
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss'],
    standalone: true,
    imports: [MatFormField, MatHint, MatLabel, MatInput, FormsModule, MatDatepicker, MatDatepickerInput, MatDatepickerToggle, MatSuffix, MatTabGroup, MatTab, NgFor, MatButton]
})
export class myComponent implements OnInit {
.. removed for brevity ..
}

组件.html：

<mat-form-field>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

主要.ts

bootstrapApplication(AppComponent, {
  providers: [
    appConfig.providers,
    [provideExperimentalZonelessChangeDetection()],
    importProvidersFrom(
      FormsModule,
      FontAwesomeModule,
      ReactiveFormsModule,
      MatDatepickerModule,
      MatToolbarModule,
      MatSnackBarModule,
      MatCardModule,
      MatButtonModule,
      MatIconModule,
      MatTabsModule,
      MatMenuModule,
      LoggerModule.forRoot({level: !environment.production ? NgxLoggerLevel.DEBUG : NgxLoggerLevel.OFF})),
    {provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: {duration: 50000}},
    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
    {provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS},
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
    provideHttpClient(withInterceptorsFromDi()),
    provideAnimations()
  ]
})
  .catch(err => console.error(err));

Answer 1

请在您的 app.component.ts 中添加以下行：

providers: [provideNativeDateAdapter()]

app.components.ts

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { RouterOutlet } from '@angular/router';

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { provideNativeDateAdapter } from '@angular/material/core';
@Component({
  selector: 'app-root',
  standalone: true,
  providers: [provideNativeDateAdapter()],
  imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'] // Ensure this path is correct
})
export class AppComponent {

}