意外指令 'MatCard' 导入错误 Angular Material 8 --

Question

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

我的 app.module.ts 中有以下导入行 wrt angular material --

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.

我开始理解为什么包括我的一些朋友在内的许多开发人员都试图避免 angular material！但是情况是这样的，在我的项目中。我一定要利用它。你能简单地告诉我这里发生了什么（或没有发生什么）吗？在同一类型的场景 (MatTableDataSource) 上有几个 github 链接，但 none 指向明确批准和接受的答案。

请帮忙，

Answer 1

将 MatCard 的导入更改为以下内容：

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

或您现有的：

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

两者都很好。

Answer 2

你必须改变这个：

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

导入 MatCardModule 而不是 MatCard

意外指令 'MatCard' 导入错误 Angular Material 8 --

Unexpected directive 'MatCard' imported Error With Angular Material 8 --

npm

material-design

angular-material

angular

angular-material-7