Почему Angular / AngularFirestore создает новые объекты, а не рассматривает их как неизменяемые?

Question

Я создаю таблицы полей ввода из хранимых в Firebase объектов JSON, называемых «Страница». «Страница» - это объект JSON, представляющий таблицу со строками, ячейками и элементами ячеек внутри ячеек. Я загружаю и создаю компоненты Angular из объекта Page JSON, представляющего таблицу, например:

<table app-page class="page"*ngFor="let page of pages | async" [page]="page" border="5" [attr.height]="page.pheight" [attr.width]="page.pwidth" align="center" valign="top"></table>

Каждый раз, когда значение в поле ввода на странице изменяется, я вызываю метод из компонента поля ввода 'onBlur', чтобы сохранить эту страницу в Firestore, например:

    inputBlur(e: Event) {
      this.cellel.value = this.inputEl.nativeElement.value.trim();
      var page = this.scService.getCurrPageComp().page;
      console.log("page =" + page); 
 this.afs.collection('pages').doc(page.$key).set(JSON.parse(JSON.stringify(page)));
  }

Проблема в том, что после this.afs сохраняется обновленный объект Page. Все дерево «let page of pages | async» возвращается, как будто они являются новыми объектами, и перестраивает страницу, как если бы она была новой. Я не хочу, чтобы это было связано с мнением. Я просто хочу, чтобы он сохранял обновленную «Страницу», а не перезагружал ее, как если бы это был новый объект «Страница».

Вот Stackblitz, показывающий ситуацию:

https://ang -change-detect-1.stackblitz.io

Answer 1

Посмотрел ваш код на stackblitz, проблема из-за строки 28 в cxforms.component.ts, а именно этой части: this.pages = this.pagesCollection.snapshotChanges()

snapshotChanges() является слушателем , всякий раз, когда эта часть базы данных изменяется ( в этом случае таблица «страниц», которая изменяется при обновлении значения ), тогда она будет отправьте свежую копию данных вашему клиенту, тем самым обновив таблицу. Похоже, вы хотите сделать одноразовый запрос в Firestore, чтобы получить данные страницы / таблицы, а не прослушивать изменения или обновленные данные.

Проверьте эту страницу документации Firestore , которая показывает вам, как сделать простой ( однократный ) запрос данных, используя .get() ... проверьте 2-й последний пример на странице, озаглавленный «Получить все документы в коллекции» ... скопированный ниже для вашей справки:

db.collection("cities").get().then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.id, " => ", doc.data());
    });
});