"'mat-form-field'不是一个已知的元素：

Question

我有一个使用材料的Angular应用程序，在我的Materials .module.ts文件夹中，我导入了MatFormFieldModule，但它没有被读取。其他材料组件工作正常，但没有找到表单字段。

组件:

<mat-form-field appearance="fill">
<mat-label>Input</mat-label>
<input matInput>
</mat-form-field>

这是材料模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatDialogModule} from '@angular/material/dialog';
import {MatInputModule} from '@angular/material/input';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';
const MaterialComponents = [
MatToolbarModule,
MatIconModule,
MatTooltipModule,
MatDialogModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule
]
@NgModule({
imports: [
CommonModule,
...MaterialComponents
],
exports: [
MaterialComponents
]
})
export class MaterialsModule { }

app模块:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './components/home/home.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialsModule } from './materials/materials-module/materials.module';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
HomeComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
MaterialsModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule { }

，这是我一直得到的错误:

Error: src/app/components/auth/auth.component.html:3:1 - error NG8001: 'mat-form-field' is not a known element:        
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3 <mat-form-field appearance="fill">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/components/auth/auth.component.ts:7:16
7   templateUrl: './auth.component.html',
~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AuthComponent.

Error: src/app/components/auth/auth.component.html:4:5 - error NG8001: 'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
4     <mat-label>Input</mat-label>
× Failed to compile.

Answer 1

根据您共享的内容，错误指向未在AppModule的声明数组中列出的组件。它指向auth.component，但我没有在你的AppModule、declarations和HomeComponent、HeaderComponent中看到它。我想它的名字是AuthComponent。把它添加到列表中。