角度垫表服务器端分页 - 分页器不启用

Question

我有一个表，其中数据来自服务器端（从父组件到子组件），数据通过输入传递，如您所见 @Input() properties: any;并且它已作为数据源加载，现在我想应用服务器端分页，我已经有一个事件是 (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代码sn-p

       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 数据 - 样本数据这是来自父组件这是我在表的数据源上加载的

{
    "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",
        },

    ]
}

Answer 1

我不知道您是否已经找到解决方法，但对我来说，解决方案是每次我使用 0ms 从服务器获取数据并更新分页器时设置超时。

IE：

this.someRepository.find(this.pageInfo).subscribe({next: (value) => {this.dataSource.data = value;setTimeout(() => {this.paginator.length = "here the total length";this.paginator.pageIndex = "here the current index";})},error: err => {}})