我有一个表，其中的数据来自服务器端（从父组件到子组件），数据通过输入传递，如您所见@Input（）属性：任何;它已被加载为数据源，现在我想应用服务器端分页，我已经有一个事件(page)="onChangePage($event)"，这将获得事件分页，并将传递给父组件，然后调用api。但问题是，正如您在屏幕截图中看到的，下面的分页或分页箭头甚至没有启用，所以我目前无法转到下一页，我检查了代码，我很肯定它是正确的。
什么似乎是我的代码的问题？感谢任何想法或帮助。

html代码

<table (matSortChange)="sortData($event)" mat-table [dataSource]="dataSource" matSort id="table" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)">
        <ng-container matColumnDef={{col.matColumnDef}} *ngFor="let col of gridColumns">
          <th mat-header-cell *matHeaderCellDef cdkDrag mat-sort-header> {{col.columnHeader}} </th>
          <td mat-cell *matCellDef="let row">
              <span *ngIf="col.columnHeader !== 'Property Name'">
                {{(col.value(row) !== 'null')? col.value(row) : '-'}}
              </span>
              <span *ngIf="col.columnHeader === 'Property Name'">
                {{(col.value(row) !== 'null')? col.value(row) : '-'}}
                <br>
                <span class="property-sub-content">{{row.city}}, {{row.state}}</span>
              </span>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getPlaceDetails(row.propertyAccountId)"></tr>
      </table>
    </div>
   <mat-paginator [length]="properties.totalItemCount" [pageSize]="properties.lastItemOnPage" [pageSizeOptions]="[20, 50, 100]" showFirstLastButtons (page)="onChangePage($event)"></mat-paginator>

ts代码段

dataSource = new MatTableDataSource<any>();
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

    @Input() properties: any;

    
    constructor(private iterableDiffers: IterableDiffers, private _route: Router, private _storageService: StorageService) {
        this.iterableDiffer = iterableDiffers.find([]).create(null);
      }
    
      ngDoCheck() {
        let changes = this.iterableDiffer.diff(this.properties);
        if (changes) {
          let dataSource: any;
          dataSource = JSON.stringify(this.properties);
          dataSource = JSON.parse(dataSource);
          dataSource = dataSource.filter(x => x.propertyAccountId);
          this.dataSource.data = dataSource;
    
          if(this.dataSource.data) {
            setTimeout(()=>{this.initFreezeTableHeader();},1000);   
          }
        }
      }
    
      ngAfterViewInit() {
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
      
      }
    
      sortData(event) {
        console.log('EVENT' , event)
      }
    
      ngOnInit(): void {    
        const currAcct = this._storageService.getCurrAcct();
        this.currentAccountId = JSON.parse(currAcct).accountId;
        this.accountName = JSON.parse(currAcct).accountName;
        this.gridColumns = PROPERTIES.GRID_COLUMNS[this.accountName];
        this.displayedColumns = this.gridColumns.map(g => g.matColumnDef);   
      }
    
      ngOnDestroy(): void {
        let customDashBoardSelected = document.querySelector('#dashboard-content-container') as HTMLElement | null;
            customDashBoardSelected.style.height = '100%';
      }
    
      drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(this.displayedColumns, event.previousIndex, event.currentIndex);
      }
    
      applyFilter(event: Event) {
        const filterValue = (event.target as HTMLInputElement).value;
        this.dataSource.filter = filterValue.trim().toLowerCase();
      }
    
      getPlaceDetails(propertyAccountId: string) {    
        this._route.navigateByUrl(`/properties/${propertyAccountId}`);
      }
    
      onChangePage(event:any){        
        this.filterProperties.emit(event)
        console.log('event' , event)
      }

properties data-示例数据，这是来自父组件的数据，这是我加载到表的数据源上的数据

{
    "firstItemOnPage": 1,
    "lastItemOnPage": 20,
    "totalItemCount": 159,
    "items": [
        {
            "id": 4619,
            "propertyName": "A Drug Store",
            "propertyAccountId": "10323202-S",
            "addressLine1": "3255 VICKSBURG LN N",

        },
        {
            "id": 9868,
            "propertyName": "B Drug Store",
            "propertyAccountId": "23210187-S",
            "addressLine1": "900 MAIN AVE",
        },

    ]
}