角材料表分页问题角10

Posted 2023-02-22

【中文标题】角材料表分页问题角10

【英文标题】：angular material table pagination issue angular 10

【发布时间】：2020-12-17 07:09:55

【问题描述】：

我正在为 Angular 10 项目使用 Angular 材料表。我成功添加了材料表。 但现在我正在尝试将分页添加到我的表格中。因此我在我的组件中添加了以下代码。

import MatPaginator from '@angular/material/paginator';

我将上述导入添加到我的 app.module.ts 文件中。

这是我为我的 html 页面添加的用于加载分页的代码

 <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

但是这个 html 标记不起作用。发生错误。

请查看下图。

我的模块

【问题讨论】：

您在哪个模块中添加了导入？

您是否在 app.module 的导入数组中添加了 Class is-nside？还是只做你提到的进口事情？

@CharybdeBE 是的，我做到了。等我更新问题

这能回答你的问题吗？ How to use paginator from material angular?

你需要将分页器模块导入到你的组件所在的同一个模块中

【参考方案1】：

正如您的 IDE 所述，该模块不知道该组件。 解决方案是将其添加到您的 app.module.ts 中（或等效项，具体取决于您在应用程序中的位置）

你应该在你的应用模块中导入模块MatPaginatorModule

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  MatPaginatorModule  from '@angular/material/paginator';
import  AppComponent  from './app.component';


@NgModule(
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    MatPaginatorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

请注意，我已经导入了模块，而不是直接导入了组件