"mat-label"不是已知元素最新的Angular Material中存在错误 [英] 'mat-label' is not a known element Error in latest Angular Material

问题描述

我的Angular材质出现错误:

I got an error in my Angular Material:

compiler.js:466 Uncaught Error: Template parse errors:
'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. ("
        </mat-form-field>
        <mat-form-field>
            [ERROR ->]<mat-label>Both a label and a placeholder</mat-label>
            <input matInput placeholder="Simple"): 

问题:

材料标签位于MatFormFieldModule下这是链接

Material Label is under MatFormFieldModule Here's the link

现在，为什么Angular Material不知道Mat-Label的问题的可能原因是什么?

Now, what is the possible cause of the issue why Mat-Label is unknown to Angular Material.

这是HTML

<mat-form-field>
          <mat-label>Both a label and a placeholder</mat-label>
          <input matInput placeholder="Simple placeholder">
</mat-form-field>

推荐答案

如果您有多个模块，请确保要在每个模块中导入MatFormFieldModule.仅将其导入到根模块中是不够的.

If you have multiple modules make sure you're importing the MatFormFieldModule in every module. It's not sufficient to just import it in the root module.

例如，我有一个CommonWidgetsModule，其中包含一些常见的小部件(我自己的)，您会看到我正在导入MatFormFieldModule和MatInputModule

For example, I have a CommonWidgetsModule which contains some common widgets (my own) and you'll see I'm importing MatFormFieldModule and MatInputModule

// common-widgets.module.ts
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,

    MatFormFieldModule,
    MatInputModule,

    // import other MatModules...

  ],
  declarations: DECLARATIONS,
  exports: DECLARATIONS
})
export class CommonWidgetsModule { }

这篇关于"mat-label"不是已知元素最新的Angular Material中存在错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！