首页 文章

如何在角度6中实现表格分页器

提问于
浏览
0

我从角度6开始,我有一些问题来实现一个表分页器 .

首先,我希望看到分页符在我的视图中工作 . 在此之后,我将尝试使用paginator实现该表 .

我正在寻找下面这个页面提供的Angular Material文档中的一个例子:

https://material.angular.io/components/paginator/overview

当我尝试运行应用程序时,我收到以下错误

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'length' since it isn't a known property of 'mat-paginator'.

我不知道问题是什么,因为我根据角度材料中的示例导入了所有模块,但我认为缺少一些我需要做的导入 . 我真诚地不知道 . 你能帮我理解发生了什么吗?谢谢你的帮助

按照下面的代码:

app.module.ts

import { AngularDraggableModule } from 'angular2-draggable';
import { DraggableAreaService } from './core/tardis/remote- control/service/draggable-area.service';
import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule,
  } from '@angular/material';

export const MaterialModules = [
 MatAutocompleteModule,
 MatBadgeModule,
 MatBottomSheetModule,
 MatButtonModule,
 MatButtonToggleModule,
 MatCardModule,
 MatCheckboxModule,
 MatChipsModule,
 MatDatepickerModule,
 MatDialogModule,
 MatDividerModule,
 MatExpansionModule,
 MatGridListModule,
 MatIconModule,
 MatInputModule,
 MatListModule,
 MatMenuModule,
 MatNativeDateModule,
 MatPaginatorModule,
 MatProgressBarModule,
 MatProgressSpinnerModule,
 MatRadioModule,
 MatRippleModule,
 MatSelectModule,
 MatSidenavModule,
 MatSliderModule,
 MatSlideToggleModule,
 MatSnackBarModule,
 MatSortModule,
 MatStepperModule,
 MatTableModule,
 MatTabsModule,
 MatToolbarModule,
 MatTooltipModule,
 MatTreeModule,
];

@NgModule({
 declarations: [
   AppComponent,
   AdminComponent,
   AuthComponent,
   BreadcrumbsComponent,
   SigninComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  BrowserAnimationsModule,
  AppRoutingModule,
  SharedModule,
  AngularDraggableModule,
  ...MaterialModules
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

code.html

<mat-paginator [length]="100"
       [pageSize]="10"
      [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

1 回答

  • 0

    在我的项目中,我有一些模块 .

    app.module.ts device.location.module.ts

    所以,我希望paginator是在device.location.html中创建的,而这个html中的模块是device.location.model.ts

    所以,我在app.module.ts中导入模块 . 我更改了device.location.module.ts的导入,它正在运行 . 现在:)

    谢谢

相关问题