Ionic/Angular/Firestore：无需页面刷新的字段刷新策略

Question

TL；DR使用AngularFirestore和离子/角度。我希望在用户设备（例如表单上的复选框）之间同步数据，而不会导致所有用户的整页刷新。

我是爱奥尼亚/Angular应用程序的快乐用户，该应用程序用于促进我管理的咖啡店的工作。我在应用程序中有一个现有的清单功能。

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

我在咖啡馆里有几款运行该应用程序的平板电脑，当人们完成任务时，他们可以检查它们。到目前为止，一切顺利。

现在，工作人员要求我同步检查表，以便如果有人在一台平板电脑上标记一个项目为完整，所有平板电脑都会得到更新。显而易见的解决方案是简单地使用双向绑定和AngularFirestore API。当一个用户选中一个复选框时，平板电脑始终处于同步状态，因为该应用程序已订阅valueChanges（）。

但是有一个问题。当一个用户更新FiRecovery时，所有其他用户都会经历页面刷新。在他们的工作流程中，他们必须重新滚动到他们工作的清单中的任何位置，然后他们的一位同事更新了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

我用Formaray解决了这个问题。以下是我所做的：

>

定义firestore集合，订阅snapShotChanges（）服务。

在ngOnInit中，将内容写入FormArray。

每次启动服务时，我都会检查哪个元素发生了更改，然后我只使用更新了FormArray的必需元素。patchValue（{标记：值}）