Angular Material 日期选取器无法读取未定义的属性

Question

我正在尝试使用 MatDatePicker，但我不断收到非常奇怪的错误，您可以在控制台中看到（下面的屏幕截图）。它不允许我打开日期选择器

Console error 1

Console error 2

这是代码

应用模块

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatButtonModule,
    FlexLayoutModule,
    MatDatepickerModule,
    MatInputModule,
    FormsModule,
    ReactiveFormsModule,
    MatNativeDateModule,
  ],
  providers: [MatDatepickerModule, MatNativeDateModule],
  bootstrap: [AppComponent],
})

应用组件

export class AppComponent {

  // Today as default start date
  myDate = new FormControl(new Date());

  constructor() {}

  ngOnInit(): void {}
}

应用组件HTML

<mat-form-field appearance="outline">
  <mat-label>Select a start date</mat-label>
  <input
    matInput
    [matDatepicker]="picker"
    [formControl]="myDate"
    />
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-picker #picker></mat-date-picker>
</mat-form-field>

Package.json

  "dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/cdk": "^13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/elements": "^13.0.0",
    "@angular/flex-layout": "^12.0.0-beta.35",
    "@angular/forms": "~13.0.0",
    "@angular/material": "^13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "document-register-element": "^1.7.2",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

一切都在屏幕上正确呈现

Correctly rendered field

然后我在控制台中遇到了那些在开始时链接的错误以及当我单击日期选择器切换时我得到以下错误

datepicker.open not a function

我哪里出错了？

Answer 1

@Carsten 的答案是正确的。有错别字

我有什么

<mat-date-picker #picker></mat-date-picker>

本来应该是什么

<mat-datepicker #picker></mat-datepicker>

Angular Material 日期选取器无法读取未定义的属性

Angular Material Date Picker Cannot read properties of underfined

javascript

typescript

angular-material

angular