Question

我正在从Firebase存储的名为“页面”的JSON对象创建输入框表。 “页面”是一个JSON对象，代表具有行和单元格以及单元格内单元格元素的表格。我从表示该表的Page JSON对象加载并创建Angular组件，如下所示：

<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对象。整个树“让页面的页面|异步”返回，就好像它们是新对象一样，并且就像页面一样重新构建页面。我不希望它对视图有任何影响。我只希望它存储更新的“页面”，而不是像它是新对象“页面”一样重新加载它。

这是一个显示情况的Stackblitz：

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

Answer 1

查看您关于stackblitz的代码，问题是由于,中的第28行，具体来说，这部分是.

cxforms.component.ts是侦听器，只要数据库的那部分发生更改（在这种情况下，“页数”表在更新值时都会更改 ），它将把新的数据副本推送到您的客户端-从而刷新您的表。听起来您好像想对Firestore进行一次查询以获取页面/表数据，而不是侦听更改或更新的数据。

签出this page of the Firestore docs，它向您展示如何使用this.pages = this.pagesCollection.snapshotChanges()对数据进行简单（一次）查询。标题为“获取集合中的所有文档”的页面...复制如下以供参考：

snapshotChanges()

为什么Angular / AngularFirestore创建新对象而不是将其视为不可变的？

1 个答案: