在Mat paginator pageOptions中不起作用

Question

-我正在尝试使用分页在表格视图中显示数据。 -问题是[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

我需要您的帮助来解决此问题。提前致谢

Answer 1

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

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

也将其添加到导入数组中

imports: [BrowserAnimationsModule]