Обновление данных таблицы матов - PullRequest
Новая
       15

Обновление данных таблицы матов

0 голосов
/ 12 декабря 2018

У меня есть мат-таблица с сортировкой и пагинатором.мой компонент выглядит следующим образом: в 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();
  }

}

1 Ответ

0 голосов
/ 12 декабря 2018

Трудно сказать, в чем именно заключается проблема без стекаблика или чего-то подобного.

Но я вспоминаю, что некоторое время назад у меня была похожая проблема, и что для меня это решило, так это явно установил 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>
...