html 'mat-card'不是Angular 7中的已知元素

ozxc1zmp  于 2022-12-09  发布在  Angular
关注(0)|答案(6)|浏览(195)

我已经看到了很多关于这个的问题,但似乎不是我遇到的相同问题。我刚刚创建了我的第二个Angular 项目。我在src/app/employees下有一个新组件,我试图在employees.component.html中使用它。我得到的错误是:

Uncaught Error: Template parse errors:
'mat-card' is not a known element:
1. If 'mat-card' is an Angular component, then verify that it is part of this module.
2. If 'mat-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-card> </mat-card>

现在,在app.module.ts中,我有:

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { LOCALE_ID, NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import {
  MatButtonModule,
  MatFormFieldModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatSelectModule,
  MatSidenavModule,
  MatCardModule,
  MatTableModule
} from "@angular/material";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatListModule,
    MatInputModule,
    MatSelectModule,
    MatSidenavModule,
    MatCardModule,
    MatTableModule
  ],....
})
export class AppModule {}

如果我在app.component.html中使用mat-card,也不会出现任何错误。

dl5txlt9

dl5txlt91#

我在声明列表中看不到EmployeesComponent。EmployeesComponent需要在导入MatCardModule的同一个模块中声明,例如:

declarations: [
    EmployeesComponent
],
imports: [
    MatCardModule
]

我猜您可能忘记在应用程序模块中声明EmployeesComponent,或者您有另一个模块,可能是Employees模块,您必须在其中导入MatCardModule。
您可以将MatCardModule导入为

import { MatCardModule } from '@angular/material/card';
8cdiaqws

8cdiaqws2#

假设:您的组件是EmployeeAddComponent(已经包含html(带有mat-card、mat-form-field等))
解决方案:打开app. module. ts
第一:检查导入"区域",确保已导入EmployeeAddComponent。第二:检查声明'area'处@NgModule,确保EmployeeAddComponent已写入此处

dxxyhpgq

dxxyhpgq3#

有时,"....不是Angular 7中的已知元素"类型的错误也是特定于Visual Studio代码的。如果您已经尝试了以下步骤:

  1. npm安装--保存Angular /材料
    1.Angular /材料的ng增加
    并且仍然在VisualStudio编辑器中得到上述错误消息,则在编辑器中关闭该项目并重新打开。
arknldoa

arknldoa4#

app.module.ts文件中添加以下行:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

schemas: [CUSTOM_ELEMENTS_SCHEMA],
gblwokeq

gblwokeq5#

您需要在app. module声明上导入组件。它应该会修复它。

niknxzdl

niknxzdl6#

我的Angular项目也遇到了同样的问题。有一次在我安装了材料并将它们导入到项目中之后。我重新启动了VSCode。它解决了这个问题。

相关问题