typescript 'mat-label'不是已知元素最新Angular Material中的错误

zour9fqk 于 2023-04-07 发布在 TypeScript

关注(0)|答案(8)|浏览(255)

我在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下
现在，问题的可能原因是什么，为什么Mat-Label对Angular Material未知。
这里是HTML

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

typescript

来源：https://stackoverflow.com/questions/47873128/mat-label-is-not-a-known-element-error-in-latest-angular-material

8条答案

按热度按时间

avwztpqn1#

如果你有多个模块，确保你在每个模块中导入了MatFormFieldModule。仅仅导入根模块是不够的。
例如，我有一个CommonWidgetsModule，其中包含一些常用的小部件（我自己的），您将看到我正在导入MatFormFieldModule和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 { }

赞(0）回复(0）举报 2023-04-07

cs7cruho2#

也可能是您忘记在模块中添加组件（即已经导入MatFormFieldModule和MatInputModule）。

赞(0）回复(0）举报 2023-04-07

kt06eoxx3#

确保您正在'app.module.ts'或相应模块的'module.ts'文件中导入MatFormFieldModule。

@NgModule({ 
  imports: [
    BrowserModule, 
    FormsModule, 
    MatFormFieldModule,
  ],
})

赞(0）回复(0）举报 2023-04-07

sczxawaw4#

我还发现，如果你使用CLI并说skip-import。这将导致组件不会出现在你的模块中。所以它不会引用回mat标签的导入。

赞(0）回复(0）举报 2023-04-07

xbp102n05#

在app.module.ts文件中添加

import {FormsModule} from "@angular/forms";

imports:[
FormsModule
]

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

赞(0）回复(0）举报 2023-04-07

jm81lzqq6#

如果要在对话框中使用，请小心
@参见https://material.angular.io/components/dialog/overview
ok

<h1 mat-dialog-title>Favorite Animal</h1>
<div mat-dialog-content>
  My favorite animal is:
  <ul>
    <li>
      <span *ngIf="data.animal === 'panda'">&#10003;</span> Panda
    </li>
    <li>
      <span *ngIf="data.animal === 'unicorn'">&#10003;</span> Unicorn
    </li>
    <li>
      <span *ngIf="data.animal === 'lion'">&#10003;</span> Lion
    </li>
  </ul>
</div>

科

<h1 mat-dialog-title>Favorite Animal</h1>
<div mat-dialog-content>
  <mat-label>My favorite animal is:</mat-label>
  <ul>
    <li>
      <span *ngIf="data.animal === 'panda'">&#10003;</span> Panda
    </li>
    <li>
      <span *ngIf="data.animal === 'unicorn'">&#10003;</span> Unicorn
    </li>
    <li>
      <span *ngIf="data.animal === 'lion'">&#10003;</span> Lion
    </li>
  </ul>
</div>

为此，您必须创建一个新组件，而不仅仅是一个html模板。

赞(0）回复(0）举报 2023-04-07

kyxcudwk7#

添加导入

import {ReactiveFormsModule } from "@angular/forms";

赞(0）回复(0）举报 2023-04-07

vtwuwzda8#

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

赞(0）回复(0）举报 2023-04-07

我来回答

typescript 'mat-label'不是已知元素最新Angular Material中的错误

8条答案

相关问题

热门标签

最新问答