В мате пагинатора 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>

раскрывающийся список элементов на странице не отображается. Я проверил консоль, когда щелкнул раскрывающийся список. Я получаю эту ошибку. Я использую angular 8

Мне нужна ваша помощь, чтобы исправить это. Заранее спасибо