在 mat-paginator 中 pageSizeOptions 不起作用

Question

1. 我正在使用 Angular Material 从事 Angular 项目。
2. 我正在尝试在表格视图中显示数据，使用分页，因为 大量数据.
3. 问题是pageSizeOptions分页选项不适用于表格。

4. 虽然模板显示下一个，上一个 按钮但它们正在工作

   我正在分享我的代码

app.组件。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.组件。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

我知道这已经很旧了，但是在你的组件 TS 代码中，你有：

pageSizeOptions = "[5, 10, 25, 100]";

您将 pageSizeOptions 声明为字符串。删除引号，它将成为一系列选项，然后应该可以工作。

Answer 2

我认为你在 html 中错过了“#paginator”。

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

Answer 3

已添加但还是不行