添加行后，Mat-paginator 不会将我定向到新页面

Question

我正在尝试通过分页向我的 table 实施内联行添加。为确保新行可见，我将用户引导至带有

的最后一页

this.dataSource.paginator.lastPage();

但是，当只有足够的数据来填充页面达到页面大小的限制时，例如页面大小 10 上的 10、20、30，它不会将我定向到新页面（只有我刚刚添加的一行）。（同时，分页器在底部显示正确的行数，我可以手动导航到它）

果然，我可以看到 this.dataSource.paginator.length 显示过时的数字（即使我已经完成了

const data = this.dataSource.data;
data.push(log);
this.dataSource.data = data;

将新行推送到数据源的技巧）

我尝试了一些我在 Whosebug 遇到的技巧，比如

    this.dataSource.paginator._changePageSize(this.dataSource.paginator.pageSize);

或尝试使用

强制导航到下一页

this.dataSource.paginator.nextPage();

我的组件

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  ngOnInit() {
    this.dataSource = new MatTableDataSource();
  }
  request(params?) {
    this.logApi.getList(params)
      .toPromise()
      .then(data => {
        this.dataSource.data = data;
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
  }

  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.dataSource.paginator.lastPage();
if (this.dataSource.paginator.hasNextPage()) {
 this.dataSource.paginator.nextPage();
}

}

HTML

<nb-card>
  <nb-card-header>
    Logs <button nbButton hero status="success" (click)="addLog()" size="tiny" [disabled]="rowAddMode || rowEditMode">Add new</button>
  </nb-card-header>
  <table [dataSource]="dataSource" matSort mat-table [ngClass]="'mat-elevation-z8'" multiTemplateDataRows>
    /* ... */
  </table>
  <mat-paginator [pageSizeOptions]="[10]" showFirstLastButtons></mat-paginator>

不用说了，我已经剥离了一些长度的代码

有什么想法吗？

Answer 1

手动更新分页器长度似乎可行。

  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; //  Add this
    this.dataSource.paginator = this.paginator; //  Add this
    this.dataSource.paginator.lastPage();
  }

Stackblitz here，当然我不得不使用不同的数据。

添加行后，Mat-paginator 不会将我定向到新页面

Mat-pagination does not direct me to new page afte adding row

angular-material

angular

mat-pagination