Angular Material 8 的意外指令“Mat Card”导入错误——答案

【问题标题】：Unexpected directive 'MatCard' imported Error With Angular Material 8 --Angular Material 8 的意外指令“Mat Card”导入错误——
【发布时间】：2019-12-31 23:17:40
【问题描述】：

我收到上述控制台错误。尝试使用 Angular 材料最新版本 8.2.3。

我的 app.module.ts 中有以下导入线 wrt 角度材料 --

import { MatInputModule, MatButtonModule, MatSelectModule, MatIconModule, MatCard } from '@angular/material';

和导入部分--

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    MatCard
  ]

相关的html部分--

<mat-card class="login-method camera" [hidden]="loginMethod!=='camera'">
                  <mat-card-content>
                    <img [hidden]="!imageUrl" [src]="imageUrl" />
                    <app-camera-snapshot [imageUrl]="imageUrl" (imageCreated)="imageChanged($event)"></app-camera-snapshot>
                  </mat-card-content>
                </mat-card>
                <mat-card class="login-method upload" [hidden]="loginMethod!=='upload'">
                  <mat-card-content>
                    <img [hidden]="!imageUrl" [src]="imageUrl" />
                    <app-image-picker [imageUrl]="imageUrl" (imagePicked)="imageChanged($event)"></app-image-picker>
                  </mat-card-content>
                </mat-card>

需要注意的是，我也尝试将“mat”替换为“md”来尝试我的代码。以防万一。我还尝试在我的 app.module.ts 中使用 MatCardContent 而不是仅导入 MatCard。不，那也不起作用。完整的错误信息是--

Uncaught Error: Unexpected directive 'MatCard' imported by the module 'AppModule'. Please add a @NgModule annotation.

我开始明白为什么包括我的一些朋友在内的许多开发人员都尽量避免使用角度材料！但是情况就是这样，在我的项目中。我一定会利用它。你能简单地告诉我这里发生了什么（或没有）吗？在同一类型的场景（MatTableDataSource）上有几个 github 链接，但没有一个指向明确的批准和接受的答案。

请帮忙，

【问题讨论】：

标签： angular npm angular-material material-design angular-material-7

【解决方案1】：

将MatCard 的导入更改为以下：

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

或者你现有的：

import { MatCardModule } from '@angular/material';

两者都可以正常工作。

【讨论】：

是的，我尝试使用来自 '@angular/material' 的 MatCardModule，它确实有效。错误消失了，很好而且很精确。谢谢，@sandeepkumar

【解决方案2】：

你必须改变这个：

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    MatCardModule //Change this line
  ]

导入 MatCardModule 而不是 MatCard

【讨论】：

是的@JuanDanielOrnella 我也试过那个变种。发布我的问题时有轻微的错字。很抱歉造成混乱，