Angular material table 数据源：分页和过滤器不起作用

Question

我有以下 angular material table 数据源属性:

<div class="dim">
  <mat-form-field >
    <input matInput class="warn" (keyup)="applyFilter($event.target.value)" placeholder="Search">
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>
</div>
<div class="mat-elevation-z2">
  <table mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="unit_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.id}}</td>
    </ng-container>

    <ng-container matColumnDef="unit_type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
      <td mat-header *matCellDef="let row">{{row.unit_type}}</td>
    </ng-container>

    <ng-container matColumnDef="location_id_auto">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>
      <td mat-header *matCellDef="let row">{{row.location}}</td>
    </ng-container>

    <ng-container matColumnDef="user_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>User</th>
      <td mat-header *matCellDef="let row">{{row.user}}</td>
    </ng-container>

    <ng-container matColumnDef="unit_number_hh">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Number Of units</th>
      <td mat-header *matCellDef="let row">{{row.unit_number}}</td>
    </ng-container>

    <ng-container matColumnDef="unit_status">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
      <td mat-header *matCellDef="let row">{{row.status}}</td>
    </ng-container>

    <ng-container matColumnDef="unit_date_added">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Date Added</th>
      <td mat-header *matCellDef="let row">{{row.date_added}}</td>
    </ng-container>
    <tr class="example-expanded-row" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;">

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

这是对应的打字稿：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
import { HttpClient } from 'selenium-webdriver/http';
import { AuthApiService } from '../../auth-api.service';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  dataSource:  any;
  displayedColumns: String[]=['unit_id', 'unit_type', 'location_id_auto', 'user_id', 'unit_number_hh', 'unit_status', 'unit_date_added'];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  constructor(private auth: AuthApiService) { }

  ngOnInit() {
    this.getUnitData();
    this.dataSource.paginator;
    this.dataSource.sort;
  }

  applyFilter(filterValue: string){
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if(this.dataSource.paginator)
    {
      this.dataSource.paginator.firstPage();
    }
  }

  getUnitData(){
    this.auth.getUnitDataService().subscribe(
      (data)=>
      {
        this.dataSource = Object.values(data);
      },
      (error)=>
      {
        console.log("Error: "+error)
      }
    )

  }

}

我正在获取数据并正常显示，但是我有6条记录，而不是第一页显示5行，另一页显示1行，而是第一页显示所有6行，过滤器是根本不工作。

这里有一个plunker，你可以添加一个数据数组来代替。

我有以下错误：

ERROR TypeError: Cannot read property 'paginator' of undefined at RegistrationComponent.push../src/app/dashboard/registration/registration.component.ts.RegistrationComponent.ngOnInit (registration.component.ts:20)

Answer 1

dataSource 类型必须是 MatTableDataSource

你已经这样声明了，

dataSource = new MatTableDataSource();

Answer 2

您的函数 getUnitData() 是异步的，并且在您访问 this.dataSource 的那一刻没有完成。把函数改成这个

getUnitData() {
    this.auth.getUnitDataService().subscribe(
      (data) => {
        this.dataSource = new MatTableDataSource(data);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
      (error) => {
        console.log("Error: "+error)
      });
}

同时调整你的html

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

Answer 3

在html绑定分页器

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

在ts文件中

  dataSource = new MatTableDataSource<any>();

需要加入

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

Angular material table 数据源：分页和过滤器不起作用

Angular material table with data source: pagination and filter is not working

pagination

datasource

angular

angular6

angular-material-6