Сортировка и разбиение на страницы не работают на Angular 5 таблицы данных. - PullRequest
Новая
       9

Сортировка и разбиение на страницы не работают на Angular 5 таблицы данных.

0 голосов
/ 03 сентября 2018

Я пытаюсь использовать этот компонент таблицы данных Angular material 5 в моем проекте: https://stackblitz.com/angular/jyerrrrdxrp?file=polyfills.ts, который включает фильтрацию, сортировку и разбиение на страницы. До сих пор мои данные правильно извлекались из базы данных и отображались в таблице, но не могут заставить работать сортировку и нумерацию страниц.

Мой HTML: 

    <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>

Мой TS: 

 import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { APIService } from '../shared/api.service';
import { Router } from '@angular/router';
import { DataService } from '../shared/data.service';

@Component({
  selector: 'app-reviewerhome',
  templateUrl: './reviewerhome.component.html',
  styleUrls: ['./reviewerhome.component.css']
})
export class ReviewerhomeComponent implements OnInit {
  displayedColumns = ['id', 'fname', 'lname', 'status'];
  dataSource: MatTableDataSource<ApplicantData>;
  datalist:any = [];
  ApplicantIndex: any;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;


  constructor(private apiService: APIService, dataService: DataService, private router: Router) {

  }

  ngOnInit() {
   this.apiService.getAllApplicants(this.ApplicantIndex).subscribe(datalist => {
     console.log('Return from getAllApplicants()');
     this.datalist = datalist;


     this.dataSource = new MatTableDataSource(datalist.content);
     console.log(datalist);
     }); 

  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}


export interface ApplicantData {
  id: number;
  fname: string;
  lname: string;
  status: string;
}

Любое понимание того, что может пойти не так?

1 Ответ

0 голосов
/ 03 сентября 2018

Проблема заключалась в том, что я не импортировал MatSortModule и MatPaginatorModule в мой app.module.ts. 

imports: [
MatSortModule,
MatPaginatorModule 
]

Как только я их добавил, все заработало.

...