0

我正在尝试通过分页实现内联行添加到我的表中。为了确保新行可见，我将用户引导到最后一页

this.dataSource.paginator.lastPage();

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

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

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

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

我尝试了一些我在 Stackoverflow 中遇到的黑客，比如

    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>

不用说，我已经删除了一些代码长度

有任何想法吗？

4

1 回答 1

0

手动更新分页器长度似乎有效。

  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 在这里，我当然不得不使用不同的数据。

于 2021-09-21T14:42:52.130 回答