Angular 12 Material 显示无法读取 MatFormField

如何解决Angular 12 Material 显示无法读取 MatFormField

这是我为单页 Web 应用编写的简单 HTML

<div class="bg">
    <h1 class="faq_heading">Frequently Asked Questions</h1>
    <div class="search">
        <mat-form-field class="search_input">
            <input type="text" placeholder="Search" class="search_input" matInput [(ngModel)]="inp" (keyup)="onKey($event)" />
        </mat-form-field>
        <mat-form-field>
            <mat-label>Categories</mat-label>
            <mat-select class="dropdown" placeholder="Categories">
                <mat-option value="Default">Default</mat-option>
            </mat-select>
        </mat-form-field>
        <img src="../assets/images/search.svg" alt="" class="search_img" />
    </div>
</div>

component.ts 文件中没有太多内容，只有基本模板和所需的导入语句

以下是app.module.ts

import { NgModule } from "@angular/core";
import { browserModule } from "@angular/platform-browser";
import { MatFormFieldModule } from "@angular/material/form-field";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { MatGridListModule } from "@angular/material/grid-list";
import { MatSelectModule } from "@angular/material/select";
import { MatPaginatorModule } from "@angular/material/paginator";
import { MatDialogModule } from "@angular/material/dialog";
import { MatSnackBarModule } from "@angular/material/snack-bar";
import { browserAnimationsModule } from "@angular/platform-browser/animations";
import { HttpClientModule } from "@angular/common/http";
import { faqservice } from "./faq.service";
import { MatExpansionModule } from "@angular/material/expansion";
import { FormsModule } from "@angular/forms";

@NgModule({
    declarations: [AppComponent],imports: [
        FormsModule,MatExpansionModule,HttpClientModule,browserModule,AppRoutingModule,MatFormFieldModule,MatGridListModule,MatSelectModule,MatDialogModule,browserAnimationsModule,MatSnackBarModule,MatPaginatorModule,],providers: [faqservice],bootstrap: [AppComponent],})
export class AppModule {}
  

以下是错误 错误 1：

ERROR TypeError: Cannot read property 'controlType' of undefined
    at MatFormField.ngAfterContentinit (form-field.js:527)
    at callHook (core.js:2526)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9486)
    at refreshComponent (core.js:10616)
    at refreshChildComponents (core.js:9242)
    at refreshView (core.js:9495)
    at renderComponentOrTemplate (core.js:9559)
    at tickRootContext (core.js:10790)

错误 2：

ERROR TypeError: Cannot read property 'errorState' of undefined
    at MatFormField_HostBindings (form-field.js:830)
    at processHostBindingOpCodes (core.js:9213)
    at refreshView (core.js:9491)
    at refreshComponent (core.js:10616)
    at refreshChildComponents (core.js:9242)
    at refreshView (core.js:9495)
    at renderComponentOrTemplate (core.js:9559)
    at tickRootContext (core.js:10790)
    at detectChangesInRootView (core.js:10815)
    at RootViewRef.detectChanges (core.js:22865)

正如您所看到的，因为我刚刚开始开发，所以代码中没有太多内容，但是我已经直接从文档中收到基本模板中的错误。 如何处理这些错误？ （请注意，我是角度材料的新手，如果可能，请在答案中提及一些细节）

这里是 package.json

{
  "name": "faq1","version": "0.0.0","scripts": {
    "ng": "ng","start": "ng serve","build": "ng build","watch": "ng build --watch --configuration development","test": "ng test"
  },"private": true,"dependencies": {
    "@angular/animations": "~12.1.1","@angular/cdk": "^12.1.1","@angular/common": "~12.1.1","@angular/compiler": "~12.1.1","@angular/core": "~12.1.1","@angular/forms": "~12.1.1","@angular/material": "^12.1.1","@angular/platform-browser": "~12.1.1","@angular/platform-browser-dynamic": "~12.1.1","@angular/router": "~12.1.1","rxjs": "~6.6.0","tslib": "^2.2.0","zone.js": "~0.11.4"
  },"devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1","@angular/cli": "~12.1.1","@angular/compiler-cli": "~12.1.1","@types/jasmine": "~3.6.0","@types/node": "^12.11.1","jasmine-core": "~3.7.0","karma": "~6.3.0","karma-chrome-launcher": "~3.1.0","karma-coverage": "~2.0.3","karma-jasmine": "~4.0.0","karma-jasmine-html-reporter": "^1.5.0","typescript": "~4.3.2"
  }
}