Mat data-table分页与排序功能失效，请求排查问题

我来帮你排查这个Mat Table分页和排序失效的问题，核心原因是你在初始化和数据更新时没有正确绑定分页器（MatPaginator）和排序器（MatSort），还有几处小的变量引用问题，具体分析和修复方案如下：

问题分析 #

1. ngOnInit阶段的初始化错误：
   你在ngOnInit里尝试给this.dataSource绑定分页和排序，但此时this.dataSource还没有被实例化（初始化代码被注释掉了），不仅会导致控制台报错，就算后续创建了dataSource，之前的绑定也不会生效。

2. 数据更新时未重新绑定分页/排序：
   在onSubmit方法中，你从服务获取数据后创建了新的MatTableDataSource实例，但没有把paginator和sort重新绑定到这个新实例上，这就导致分页和排序控件无法和新的数据源建立关联，自然无法工作。

3. 变量引用错误：
   onSubmit里的FromDate和ToDate没有使用this前缀，会导致变量未定义的错误，无法正确传递参数给服务。

修复后的TypeScript代码 #

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
import { CampaignService } from 'services/campaign.service';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';

export interface State {
  Name: string;
  Id: number;
}

@Component({
  selector: 'app-logs',
  templateUrl: './logs.component.html',
  styleUrls: ['./logs.component.css']
})
export class LogsComponent implements OnInit {
  dataSource: MatTableDataSource<any>;
  displayedColumns: string[] = ['StartTime', 'Duration', 'CallType', 'CLI', 'Campaign' , 'Agent' , 'Disposition' , 'Remarks' , 'TransfferedTo'];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private webService: CampaignService) { }

  FromDate: any;
  ToDate: any;
  Campaign: any;
  Agent: any;
  MobileNumber: any;
  stateCtrl = new FormControl();
  filteredStates: Observable<State[]>;
  Model: any;
  Data: any;
  Result: any;

  private _filterStates(value: string): State[] {
    const filterValue = value.toLowerCase();
    return this.Data.filter(state => state.Name.toLowerCase().indexOf(filterValue) === 0);
  }

  ngOnInit() {
    // 初始化空的dataSource，避免undefined报错
    this.dataSource = new MatTableDataSource([]);
    // 先绑定分页和排序（后续数据更新时还要重新绑定）
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  onSubmit(data) {
    // 修正：使用this.FromDate和this.ToDate，避免变量未定义
    const details = JSON.stringify({ 
      FromDate: this.FromDate, 
      ToDate: this.ToDate, 
      Campaign: this.Campaign, 
      Agent: data.Agent, 
      MobileNumber: data.MobileNumber 
    });
    
    this.webService.CallDetails(details)
      .subscribe(
        response => {
          this.Model = response;
          this.Result = this.Model.log;
          // 创建新的数据源实例
          this.dataSource = new MatTableDataSource(this.Result);
          // 关键：重新绑定分页器和排序器到新的数据源
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
        },
        (error) => console.error(error)
      );
  }
}

关键修改点说明 #

• 在ngOnInit中初始化了空的MatTableDataSource，避免初始阶段的undefined错误，同时提前绑定分页和排序。
• 在onSubmit获取数据后，创建新的dataSource实例必须重新绑定paginator和sort，确保控件和数据源关联。
• 修正了FromDate和ToDate的引用问题，加上this前缀，确保参数正确传递。

这样修改后，你的Mat Table的分页和排序功能应该就能正常工作了。

内容的提问来源于stack exchange，提问作者Prudhvi Bharadwaj M