Question

我的Angular材料出错：

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 Here's the link

下

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

这是HTML

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

Answer 1

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

例如，我有一个CommonWidgetsModule，其中包含一些常见的小部件（我自己的），但是我只将MatFormFieldModule导入了app.module.ts文件中。

// common-widgets.module.ts

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

    MatIconModule,

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

Answer 2

将@ angular / material升级到“5.2.0”，问题就会消失。

Answer 3

在 app.module.ts 文件中添加

从“@angular/forms”导入{FormsModule}；

进口：[ 表单模块 ]

FormModule 包含所有与表单相关的字段

Answer 4

我还发现您是否使用CLI并说“跳过导入”。然后，这将导致该组件未出现在您的模块中。因此，它不会引用回垫标签的导入。

＆＃39;垫标签＆＃39;不是最新Angular材质中的已知元素错误

4 个答案: