Question

我正在尝试在我的项目https://stackblitz.com/angular/jyerrrrdxrp?file=polyfills.ts中使用此Angular material 5数据表组件，该组件具有过滤，排序和分页功能。到目前为止，我的数据已从数据库中正确获取并显示在表中，但无法使排序和分页工作。

我的HTML：

<div class="links-container" v-for="(linkValue, key) in links[0]">
   <a :href="linkValue.link" class="link-container"><img
      :src='linkValue.logo' alt='key' class='link-img'></a>
</div>

我的TS：

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

<div *ngIf="dataSource.data.length === 0">
  There were no applicants found.
</div>
<div *ngIf="dataSource.data.length > 0">
  <div class="example-container mat-elevation-z8">
    <mat-table [dataSource]="dataSource" matSort>

      <!-- ID Column -->
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.applicantId}} </mat-cell>
      </ng-container>

      <!-- First Name Column -->
      <ng-container matColumnDef="fname">
        <mat-header-cell *matHeaderCellDef mat-sort-header> First Name </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.applicantFirstName}} </mat-cell>
      </ng-container>

      <!-- Last Name Column -->
      <ng-container matColumnDef="lname">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Last Name </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.applicantLastName}} </mat-cell>
      </ng-container>

      <!-- Status Column -->
      <ng-container matColumnDef="status">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
        <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.applicantStatus.applicationStatusDescription}} </mat-cell>
      </ng-container>

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

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

对可能出什么问题有任何见解吗？

Answer 1

问题是我没有在app.module.ts中导入MatSortModule和MatPaginatorModule。

imports: [
MatSortModule,
MatPaginatorModule 
]

一旦我添加了它们，它就可以正常工作。

排序和分页不适用于Angular 5数据表。

1 个答案: