3

这是我为单页 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 {}

以下是错误Error1：

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"
  }
}
4

1 回答 1

6

MatInputModule在模块文件中导入并声明解决问题

....
import {MatInputModule} from '@angular/material/input';


@NgModule({
    ...
    ,
    imports: [
        ...
        MatInputModule,
    ],
    providers: [
        ....
    ]
})
export class MyModule {}
于 2021-10-29T07:12:57.143 回答