4

我有以下具有数据源属性的角度材料表：

<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，您可以添加一个数据数组。

我有以下错误：

错误类型错误：无法读取RegistrationComponent.push../src/app/dashboard/registration/registration.component.ts.RegistrationComponent.ngOnInit（registration.component.ts:20）处未定义的属性“分页器”

在此处输入图像描述

4

3 回答 3

8

您的功能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>
于 2018-09-03T08:47:54.423 回答
1

数据源类型必须是MatTableDataSource

你已经这样宣布，

dataSource = new MatTableDataSource();
于 2018-09-03T08:47:03.960 回答
1

在 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;
   }
于 2018-09-03T08:53:03.913 回答