Ionic/Angular/Firestore: 不刷新页面的字段刷新策略

Question

TL;DR 将 AngularFirestore 与 Ionic/Angular 结合使用。我想在用户设备之间同步数据（例如表单上的复选框）而不导致所有用户刷新整个页面。

我是 Ionic/Angular 的快乐用户，因为我使用该应用程序来促进我管理的咖啡店的工作。我在应用程序中有一个现有的清单功能。

该应用程序是使用 FireStore 作为后端实现的，我使用的是 AngularFirestore API。

我有几台平板电脑运行 Cafe 中的应用程序，当人们完成任务时，他们可以将它们打勾。到目前为止，还不错。

现在工作人员要求我同步清单，这样如果有人在一台平板电脑上将某项标记为完成，所有平板电脑都会得到更新。显而易见的解决方案是简单地使用双向绑定和 AngularFirestore API。当一个用户选中一个框时，平板电脑将始终保持同步，因为该应用已订阅 valueChanges().

但是有个问题。 当一个用户更新 Firestore 时，所有其他用户都会经历页面刷新。在他们的工作流程中，他们必须重新滚动到清单中他们在其中一个之前工作的任何位置他们的同事更新了 FireStore 数据库。真烦人。

我怀疑我缺少一个基本的 AngularFirestore 或 Ionic/Angular 想法。我想更新页面上的字段而不刷新整个页面。

这是一个典型的实现：

module.ts

this.notesCollection = this.afs.collection('notes', (ref) =>
  ref.orderBy('deleted').orderBy('notes').where('deleted', '!=', 'true')
);

this.notesInfo = this.notesCollection.snapshotChanges();

this.notesInfo.subscribe((notes) => {
  this.notesElements = notes.map((note) => ({
    id: note.payload.doc.id,
    ...note.payload.doc.data(),
    expanded: false,
  }));
});

html

  <ion-list>
    <div *ngFor="let note of notesElements">
      <div *ngIf="!note.deleted">
        <ion-item>
      <ion-grid>
        <ion-row width="100%">
          <ion-col size="11">{{note.notes}}</ion-col>
          <ion-col size="1">
            <ion-buttons>
              <ion-button
                slot="end"
                (click)="expandItem($event, false, note)"
                ><div>Edit</div>
              </ion-button>
            </ion-buttons>
          </ion-col>
        </ion-row>

...

Answer 1

我使用 FormArray 解决了这个问题。这是我所做的：

定义一个 firestore 集合，订阅 snapShotChanges() 服务。
在ngOnInit中，将内容写入FormArray。
每次启动服务时，我都会检查哪个元素发生了变化，然后我只使用 .patchValue({tag: value})
更新了 FormArray 的必需元素

Ionic/Angular/Firestore: 不刷新页面的字段刷新策略

Ionic/Angular/Firestore: Strategy for field refresh without page refresh

page-refresh

ionic-framework

angular