Mat table 分页未正确加载

Question

目前来自 JSON 对象的所有结果都出现在第一页上，因此分页不起作用。当垫子 table 达到 10 行并开始分页时，它的高度不会停止增长。我一直在参考文档和示例，但似乎无法让它停止增加高度并开始将行移动到下一页。 mat-sort 也不起作用。不确定是否相关。感谢您的帮助。


  <table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
          <!-- Id Column -->
          <ng-container matColumnDef="title">
            <th class="tableStyle" mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
            <td [ngStyle]="{'width': '20%'}" class="tableStyle" mat-cell *matCellDef="let row">
              {{row.title}}</td>
          </ng-container>


          <ng-container class="tableStyle" matColumnDef="lastBidderName">
            <th id="dateReceivedHeader" class="tableStyle" mat-header-cell *matHeaderCellDef mat-sort-header>Last Bidder
            </th>
            <td [ngStyle]="{'width': '20%'}" id="dateReceived" class="tableStyle" mat-cell *matCellDef="let row">
              {{row.lastBidderName }}</td>
          </ng-container>

          <ng-container class="tableStyle" matColumnDef="currentBid">
            <th id="dateReceivedHeader" class="tableStyle" mat-header-cell *matHeaderCellDef mat-sort-header>Last Bid
            </th>
            <td [ngStyle]="{'width': '15%'}" id="dateReceived" class="tableStyle" mat-cell *matCellDef="let row">
              ${{row.currentBid }}</td>
          </ng-container>

          <ng-container class="tableStyle" matColumnDef="auctionType">
            <th id="dateReceivedHeader" class="tableStyle" mat-header-cell *matHeaderCellDef mat-sort-header>Auction
              Type</th>
            <td [ngStyle]="{'width': '20%'}" id="dateReceived" value="returnAuctionType(row.auctionType)"
              class="tableStyle" mat-cell *matCellDef="let row">
              {{returnAuctionType(row.auctionType)}}</td>
          </ng-container>

          <ng-container class="tableStyle" matColumnDef="auctionEndDateTime">
            <th id="dateReceivedHeader" class="tableStyle" mat-header-cell *matHeaderCellDef mat-sort-header>Auction End
              Date</th>
            <td [ngStyle]="{'width': '55%'}" id="dateReceived" class="tableStyle" mat-cell *matCellDef="let row">
              <span id="endDateTimeLabel" [ngClass]="{'activeAuction': row.auctionEndDateTime > this.today}">
                {{row.auctionEndDateTime * 1000 | date: 'medium'}}</span></td>
          </ng-container>


          <tr mat-header-row *matHeaderRowDef="displayedColumnAuctions"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumnAuctions;"></tr>

        </table>

        <mat-paginator id="paginator" #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="10">
        </mat-paginator>

垫子-table.ts文件


 dataSource: MatTableDataSource<Listing>;

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  displayedColumnAuctions = [
    "title",
    "lastBidderName",
    "currentBid",
    "auctionType",
    "auctionEndDateTime"
  ];
  constructor(
    private mobileDetect: DeviceDetectorService,
    private submitListingService: SubmitListingService,
    private authService: AuthService
  ) {}

  ngOnInit() {


    this.userId = this.authService.getUserId();
    this.submitListingService.getArtistListings(this.userId).subscribe(res => {
      console.log("res");
      console.log(res);
      this.auctions = res.posts;
      this.auctions.sort((a, b) => b.auctionEndDateTime - a.auctionEndDateTime);
      this.dataSource = new MatTableDataSource(this.auctions);
      this.dataSource.sort = this.sort;
    });
  }
  ngViewAfterInit() {
    this.dataSource.paginator = this.paginator;
  }
  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

Answer 1

您遇到了异步问题，当您从服务器收到响应时定义了数据源，但您在 ngViewAfterInit 生命周期中定义了分页。

请像这样更改您的代码

dataSource: MatTableDataSource<Listing> = new MatTableDataSource();
itemsCount = 0;

ngOnInit() {
   this.dataSource.paginator = this.paginator;
   this.dataSource.sort = this.sort;
   this.submitListingService.getArtistListings(this.userId).subscribe(res => {
      console.log("res");
      console.log(res);
      this.auctions = res.posts;
      this.auctions.sort((a, b) => b.auctionEndDateTime - a.auctionEndDateTime);
      this.dataSource.data = this.auctions;
   });
}

Mat table 分页未正确加载

Mat table pagination not loading correctly

angular

mat-table