新增表格行后Mat-pagination无法自动跳转至新页面问题求助

问题原因 #

Angular Material 的 MatTableDataSource 更新 data 属性后，MatPaginator 的 length 不会同步立即更新，需要等待下一次 Angular 变更检测周期完成才会刷新。你在更新数据源后立刻调用 lastPage() 方法时，使用的还是更新前的旧长度值，所以当原数据刚好填满整页时，旧长度计算出来的最后一页还是原来的页面，不会跳到新增行所在的新页面。

解决方案 #

直接在更新数据源后手动同步分页器的长度为最新的数据长度，再执行跳页逻辑即可，不需要调用私有方法或者强制换页。

修正后的 addLog 方法代码如下：

addLog() {
  const log = new Log();
  log.assignee = '';
  log.timeSpentTotal = 0;
  this.checkRowValid();
  const data = this.dataSource.data;
  data.push(log);
  this.dataSource.data = data;
  // 手动同步分页器长度为最新数据长度
  this.paginator.length = data.length;
  // 直接跳转到最后一页
  this.paginator.lastPage();
}

可选替代方案（不推荐） #

如果不想手动维护长度，也可以把跳页逻辑放到 setTimeout 中，等待变更检测完成后再执行，不过这种方式属于时序hack，稳定性不如手动同步长度：

addLog() {
  // 前面的新增逻辑不变
  this.dataSource.data = data;
  setTimeout(() => {
    this.paginator.lastPage();
  })
}

内容的提问来源于stack exchange，提问作者shredder