Question

我从6号角开始，在实现表格分页器时遇到一些问题。

首先，我希望看到分页器在我看来正在工作。之后，我将尝试使用分页器实现该表。

我正在下面的本页中找到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>

Answer 1

在我的项目中，我有一些模块。

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

因此，我希望在pdevice.location.html中创建分页器这个html的模块是device.location.model.ts

因此，我正在将模块导入app.module.ts中。我更改了device.location.module.ts的导入，并且可以正常工作。现在：）

谢谢

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

1 个答案: