[英]Uncaught Error: Unexpected directive 'angular-material' imported by the module 'MyMaterialModule'. Please add a @NgModule annotation. angular 5
I keep have this error我一直有这个错误
Uncaught Error: Unexpected directive 'MatPaginator' imported by the module 'MaterialModule'.
未捕获的错误:由模块“MaterialModule”导入的意外指令“MatPaginator”。 Please add a @NgModule annotation.
请添加@NgModule 注释。
this is my material module这是我的材料模块
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 { }
and this is my app.module这是我的 app.module
...
import { MaterialModule } from './material.module';
@NgModule({
declarations: [
...
],
imports: [
...
MaterialModule,
...
],
providers: [...],
bootstrap: [ AppComponent]
})
export class AppModule { }
and also this is my view这也是我的观点
<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>
i took it from angular material documentation how can i fix it ?我从angular material 文档中获取了它,我该如何修复它?
I had the same problem.我有同样的问题。 I imported the
MatPaginatorModule
inside my @NgModule
into the imports array.我将
MatPaginatorModule
@NgModule
导入到了导入数组中。 It solved my problem.它解决了我的问题。 I hope it works for you too.
我希望它也适用于你。
You are importing MatPaginator module, insted of importing MatPaginator please import MatPaginatorModule module.要导入MatPaginator模块,insted的进口MatPaginator请输入MatPaginatorModule模块。 Have the same issue this one work for me.
有同样的问题,这对我有用。
Like:喜欢:
// 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 { }
You should import MatPaginator Module but you're importing MatPaginator, change it in your MaterialModule and you're done.您应该导入 MatPaginator 模块,但您正在导入 MatPaginator,在您的 MaterialModule 中更改它,您就完成了。
Saludos.萨卢多斯。
const MaterialModules = [ MatButtonModule, MatToolbarModule, MatIconModule, MatDialogModule, MatCardModule, MatPaginatorModule ] const MaterialModule = [ MatButtonModule, MatToolbarModule, MatIconModule, MatDialogModule, MatCardModule, MatPaginatorModule ]
These are the modules, I have impoted and exported modules from material but not individual components or buttons etc.. (most generalized)这些是模块,我从材料中导入和导出模块,而不是单个组件或按钮等..(最通用的)
I beleive MatPaginatorModule is the one which you need to import and it will provide all required directives or components for your case我相信 MatPaginatorModule 是您需要导入的那个,它将为您的案例提供所有必需的指令或组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.