在 Mat 分页器 pageOptions 中不起作用答案

【问题标题】：In Mat paginator pageOptions is not working在 Mat 分页器 pageOptions 中不起作用
【发布时间】：2020-08-25 04:38:17
【问题描述】：

- 我正在尝试使用 mat 分页在表格视图中显示数据。 - 问题是 [pageSizeOptions]="[5, 10, 25, 100]" 不起作用。 - 虽然，下一个和上一个都运行良好。

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import { Router } from '@angular/router';
import {MatIconModule} from '@angular/material/icon';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatSortModule, MatSort} from '@angular/material/sort';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


@Component({
  selector: 'app-sample-view',
  templateUrl: './sample-view.component.html',
  styleUrls: ['./sample-view.component.scss']
})
export class SampleViewComponent implements OnInit {

  displayedColumns: string[] = ['First_Name'];
  @ViewChild(MatSort, {static: true}) sort: MatSort;
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
dataSource: MatTableDataSource<any>;

  constructor(private router: Router,private fs:patternService){
}
display_pattern(){

   this.fs.display_pattern(this.pattern).subscribe(
       (data) => {
         this.pattern = data.results;
         this.dataSource = new MatTableDataSource(this.pattern);
         this.dataSource.sort=this.sort;
         setTimeout(() => this.dataSource.paginator = this.paginator);
         console.log("Datasource:",this.dataSource)
       },
       err => {
         console.error(err);
       }

     );


   }




}

sample.component.html

<div class="mat-elevation-z8" id=test>
             <mat-table [dataSource]="dataSource" matSort>
               <ng-container matColumnDef="First_Name">
                    <mat-header-cell *matHeaderCellDef  mat-sort-header>Name</mat-header-cell>
                    <mat-cell *matCellDef="let element">{{element.First_Name}}</mat-cell>
                </ng-container>

             </mat-table>
              <mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]" [length]="50" [pageSize]="5" showFirstLastButtons></mat-paginator>
          </div>
    </div>

未显示每页项目数下拉菜单。单击下拉菜单时，我在控制台中签入。我收到这个错误。我正在使用角度 8

我需要你的帮助来解决这个问题。提前致谢

【问题讨论】：

你定义了updateHub吗？
必须设置分页器的长度和大小。
是的，我设置了长度和大小，还是不行
不，我没有@ArunMohan

标签： angular typescript

【解决方案1】：

解决方法是在app.module.ts中添加BrowserAnimationsModule

import { BrowserAnimationsModule } from '@angular/platformbrowser/animations';

也将其添加到导入数组中

imports: [BrowserAnimationsModule]

【讨论】：