Question

我正在使用 Angular Material 进行Angular项目。
我正在尝试通过表格分页在表格视图中显示数据，因为很多数据。
问题是 pageSizeOptions 分页选项不适用于表格。
尽管模板显示下一个，上一个 按钮，但是它们正在运行

我正在共享我的代码

app.component。 ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { CustomerService } from '../_service/customer/customer.service';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import { MatSort } from '@angular/material';


@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.scss']
})
export class CustomerComponent implements OnInit {
  customerData : any = [];
  addCustomer : boolean = false;
  displayedColumns: string[] = ['customerName', 'customerPhone', 'customerEmail', 'created_at'];
  dataSource : any;

  length: number;
  pageSize: number=1;
  pageSizeOptions = "[5, 10, 25, 100]";

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  constructor(public rest : CustomerService) { }

  ngOnInit() {
    this.getCustomer();

  }

  getCustomer() {

    this.rest.getCustomers(localStorage.getItem('currentUser')).subscribe(result => {
      if(result['status'] == 1){
        this.customerData = result['value'];
        this.dataSource = new MatTableDataSource(this.customerData);
        this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
      }
      console.log(this.customerData)})
  }


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

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

app.component。 html

<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" MatSort>

    <!-- Position Column -->
    <ng-container matColumnDef="customerName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Customer Name </th>
      <td mat-cell *matCellDef="let row"> {{row.customerName}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="customerPhone">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Phone Number </th>
      <td mat-cell *matCellDef="let row"> {{row.customerPhone}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="customerEmail">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Eamil </th>
      <td mat-cell *matCellDef="let row"> {{row.customerEmail}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="created_at">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Added on </th>
      <td mat-cell *matCellDef="let row"> {{row.created_at}} </td>
    </ng-container>

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

Answer 1

我认为您在HTML中错过了“ #paginator”。

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

在mat-paginator中，pageSizeOptions无法正常工作

1 个答案: