使用分页器时更新材质表的问题

Question

我已经搜索了，我已经搜索了，我已经搜索了，我找不到这个问题的答案。

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

但是，如果后端数据发生变化，只有当我显示所有数据或禁用分页时，UI 上的材质表行才会自动刷新。但是，启用分页后，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;
}

这会强制材质表在时间戳更改时更新表。