0

我有一个带有排序和分页器的垫表。我的组件看起来像这样，因为在 ngOnInit 中我注册到一个调用 populateAlertTableSource 函数的事件处理程序。调用此函数时，表格中的数据确实会刷新，但绘制器不会，除非我将鼠标悬停在表格上（或单击分页器）。当我从表中删除一行时也会发生这种情况 - 在我将鼠标悬停在表上（或单击分页器）之前，该行不会消失并且分页器不会刷新。当我在其声明中手动填充数据源时，这似乎不会发生，并且 pagiantor 会当场更新。

export class SomeComponent implements OnInit {

  AlertsCollection: any = [];
  alertsDataSource = new MatTableDataSource(this.AlertsCollection);
  @ViewChild('AlertsMatSort') alertSort: MatSort;
  @ViewChild("AlertsPaginator") paginator: MatPaginator;

  constructor(private alertsService: AlertsService, private alertsHubService: AlertsHubService,
    private changeDetectorRefs: ChangeDetectorRef, private modalService: NgbModal) {}


  ngOnInit() {
    this.alertsHubService.subscribe(utils.url_root);
    this.alertNotificationProxy = this.alertsHubService.generateProxy();
    this.alertsService.registerProxy(this.alertNotificationProxy, 'updateDashboard', (message: any[]) => {
      this.populateAlertTableSource(message)
    });
  }

  ngAfterViewInit() {
    this.alertsDataSource.paginator = this.paginator;
    this.alertsDataSource.sort = this.alertSort;
  }

  populateAlertTableSource(message: any) {
    this.AlertsCollection = message
    this.alertsDataSource.data = this.AlertsCollection;
    this.alertsDataSource.paginator = this.paginator;
    this.alertsDataSource.sort = this.alertSort;
    this.alertsTable.renderRows();
    this.refresh();
  }


  deleteAlert(alert: any) {
    this.alertsService.skipAlert(alert).subscribe(() => {
        var index = this.AlertsCollection.indexOf(alert, 0);
        if (index > -1)
          this.AlertsCollection.splice(index, 1);
        this.alertsDataSource.data = this.AlertsCollection;
        this.alertsTable.renderRows();
      },
      (error: AppError) => {
        console.log(error);
        throw error;
      }
    );
  }


  refresh() {
    this.changeDetectorRefs.detectChanges();
  }

}
4

1 回答 1

0

如果没有 stackblitz 或类似的东西，很难说出确切的问题是什么。

但我确实记得前段时间遇到过类似的问题，为我解决的问题是在模板中length的元素上显式设置。mat-paginator

在您的组件中：

public _alertsDataSourceLength: number;

...

populateAlertTableSource(message: any) {
    this.AlertsCollection = message
    this._alertsDataSourceLength = this.AlertsCollection.length; // new
    this.alertsDataSource.data = this.AlertsCollection;
    this.alertsDataSource.paginator = this.paginator;
    this.alertsDataSource.sort = this.alertSort;
    this.alertsTable.renderRows();
    this.refresh();
}

在您的模板中：

<!-- set the length explicitly -->
<mat-paginator [pageSize]="10"
               [length]="_alertsDataSourceLength"
               [pageSizeOptions]="[5, 10, 20]"
               [showFirstLastButtons]="true">
</mat-paginator>
于 2018-12-12T10:25:59.020 回答