使用分页器时 material table 更新的问题

Question

我找了找了找了，找不到这个问题的答案。

我正在使用 Angular Firestore 获取数据（尝试了 snaphotChanges 和 valueChanges）。该代码有效。

但是，如果后端的数据发生变化，UI 上的 material table 行只会在我显示所有数据或禁用分页时自动刷新.但是，当启用分页时，UI 诉诸于显示数据已更新，但它不会刷新单元格值，直到我将光标移动到行上以强制刷新。我不知道这是一个错误还是我做错了什么。

我制作了一个视频来展示发生了什么：https://youtu.be/SN6EFc6Vqm8

// Have this in my service. It works  
getContactsByLimit(limit) {
    return this.afs
      .collection("users")
      .doc(this.user.currentUserId)
      .collection("contacts", ref =>
        ref
          .orderBy("id", "desc")
          .limit(limit)
      )
      .valueChanges();
  }

  // The paginator declaration
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

// This works
this.contactsSubscription = this.contactsvc
      .getContactsSnapshotChangesByLimit(3) 
      .subscribe(contacts => {
        // This works, I get new data.
        this.dataSource.data = contacts;  
      });

// HTML template
<mat-paginator class="paginator" 
  [length]="15"  // This breaks the refresh
  [pageSize]="3" 
  [pageSizeOptions]="[2,3,5]" 
  (page)="pageEvent($event)"></mat-paginator>

// The automatic refresh does not work if I set 
// the length to be > 3 in this case (unless I move 
// the mouse on the table).

无论长度是否 > pageSize，UI 都应该用新数据刷新。

Answer 1

想通了。我正在使用 trackBy 按 ID 进行跟踪。我在我的文档中添加了一个时间戳字段并开始按时间戳进行跟踪。

 <table [dataSource]="dataSource" [trackBy]="trackByTimestmamp" mat-table>

和

trackByTimestmamp(index, item) {
    return item.timestamp;
}

这会强制 material table 在时间戳更改时更新 table。

使用分页器时 material table 更新的问题

Issues with the material table updating when using paginator

paging

cursors

firebase

google-cloud-firestore

angular-material-table