未捕获的错误：模块“MyMaterialModule”导入的意外指令“angular-material”。请添加 @NgModule 注释。角 5

Posted 2023-03-13

【中文标题】未捕获的错误：模块“MyMaterialModule”导入的意外指令“angular-material”。请添加 @NgModule 注释。角 5

【英文标题】：Uncaught Error: Unexpected directive 'angular-material' imported by the module 'MyMaterialModule'. Please add a @NgModule annotation. angular 5

【发布时间】：2018-05-08 08:17:47

【问题描述】：

我一直有这个错误

未捕获的错误：模块“MaterialModule”导入了意外的指令“MatPaginator”。请添加@NgModule 注解。

这是我的材料模块

import  NgModule, ViewChild  from '@angular/core';
import  CommonModule  from '@angular/common';
import  MatPaginator, MatSort, MatTableDataSource,MatButtonModule, 
MatTableModule  from '@angular/material';

@NgModule(
    imports: [MatButtonModule,MatTableModule,
              MatPaginator, MatSort, 
              MatTableDataSource],
    exports: [MatButtonModule,MatTableModule,MatPaginator, MatSort, 
             MatTableDataSource],
)
export class MaterialModule  

这是我的 app.module

...
import  MaterialModule  from './material.module';


@NgModule(
  declarations: [
     ...

  ],
  imports: [
    ...
    MaterialModule,
    ...
  ],
  providers: [...],
  bootstrap: [ AppComponent]
)
export class AppModule  

这也是我的看法

<div class="example-container mat-elevation-z8">
   <div class="example-header">
     <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" 
    placeholder="Filter">
    </mat-form-field>
  </div>

<!-- Name Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
  <mat-cell *matCellDef="let user"> user.name </mat-cell>
</ng-container>

<!-- Weight Column -->
<ng-container matColumnDef="email">
  <mat-header-cell *matHeaderCellDef> email </mat-header-cell>
  <mat-cell *matCellDef="let user"> user.email </mat-cell>
</ng-container>

<!-- Color Column -->
<ng-container matColumnDef="phone">
  <mat-header-cell *matHeaderCellDef> phone </mat-header-cell>
  <mat-cell *matCellDef="let user"> user.phone </mat-cell>
</ng-container>

<ng-container matColumnDef="company">
  <mat-header-cell *matHeaderCellDef> company </mat-header-cell>
  <mat-cell *matCellDef="let user"> user.company.name </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

我从angular material documentation 拿走了它，我该如何解决？

【问题讨论】：

我会导入MatPaginatorModule

我已经导入了，还是出现这个错误

您是否从imports 中删除了MatPaginator？

是的，我会更新帖子

我从 Angular Material 文档中获取了它

【参考方案1】：

我遇到了同样的问题。我将@NgModule 中的MatPaginatorModule 导入到导入数组中。 它解决了我的问题。我希望它也对你有用。

【参考方案2】：

您正在导入 MatPaginator 模块，如果要导入 MatPaginator 请导入 MatPaginatorModule 模块。有同样的问题，这对我有用。

喜欢：

// material.module.ts

import  NgModule  from '@angular/core';
import  MatTableModule  from '@angular/material/table';
import  MatPaginatorModule  from '@angular/material/paginator';

@NgModule(
    imports: [
        MatTableModule,
        MatPaginatorModule
    ],
    exports: [
        MatTableModule,
        MatPaginatorModule
    ]
)

export class MaterialModule  

【参考方案3】：

您应该导入 MatPaginator 模块，但您正在导入 MatPaginator，在您的 MaterialModule 中更改它就完成了。

感谢。

【参考方案4】：

常量 MaterialModules = [ MatButton模块， MatToolbar模块， MatIcon模块， MatDialog模块， MatCard模块， MatPaginator 模块 ]

这些是模块，我从材料中导入和导出模块，但不是单个组件或按钮等。（最通用）

我相信 MatPaginatorModule 是您需要导入的模块，它将为您的案例提供所有必需的指令或组件