Angularfire2，Firestore 文档检索问题（使用 .get，可能与 ngOnChanges 相关）答案

【问题标题】：Angularfire2, Firestore Document Retrieval Issue (using .get, possibly related to ngOnChanges)Angularfire2，Firestore 文档检索问题（使用 .get，可能与 ngOnChanges 相关）
【发布时间】：2018-12-02 23:40:49
【问题描述】：

我的应用程序结构有 1 个服务和 2 个组件：

Service：持有所有的 Firestore 连接 ViewComponent：从服务中获取列表并显示 ItemManagementComponent：显示一个表单并允许用户添加一个新条目。

问题我在 ViewComponent 中有一个按钮（理论上），它向 ManagementComponent 发送一个 documentID，然后在表单中显示该文档数据，从而允许用户更新。现在，当我单击按钮时，我可以跟踪 doumentID，并且服务一直通过我的应用程序返回，但我实际上并没有得到返回的文档。我可以使用硬连线的 documentID 运行完全相同的代码，而且效果很好，所以显然我遗漏了一些东西。

服务

  getUpdateInventoryItem(updateId: string) {
    console.log('service', updateId)
    this.updateId = updateId
    console.log('service2', this.inventoryCollectionRef.doc(updateId).ref.get())
    return this.inventoryCollectionRef.doc(updateId).ref.get()
  }

查看 HTML

<td><button type="button" class="btn btn-default" (click)="updateInventory(item.id)">Upd</button></td>
<app-item-management [updateID]="ChildUpdateId"></app-item-management>

查看组件

@Output() inventoryUpdate = new EventEmitter();
public ChildUpdateId: string;

updateInventory(updateId: string) {
this.ChildUpdateId = updateId;
}

物品管理组件

@Input() updateID;

  ngOnChanges(incomingID: SimpleChanges) {
    if (!incomingID['updateID'].isFirstChange()) {
      for (let ID in incomingID) {
        let chng = incomingID[ID];
        let cur = JSON.stringify(chng.currentValue);
        console.log('current', cur)
        this.updateInventory(cur)
      }
    }
  }

updateInventory(incomingID) {
    console.log('updateFunction',incomingID)
    this.inventoryService.getUpdateInventoryItem(incomingID)
      .then((doc) => {
        if (doc.exists) {
          this.editItem = doc.data();
          this.inventoryForm.patchValue(this.editItem);
          this.update = true;
        } else {
          console.log("No such document!");
        }
      }).catch(function (error) {
        console.log("Error getting document:", error);
      });
  };

所以，如果我单击视图 HTML 上的更新按钮，这就是我的控制台向我显示的内容：console log screenshot 从我的角度来看，我看到了传递给服务的 ID，并且服务的格式正确记录要返回的响应。

如果我直接从控制台日志复制文档 ID 并将其硬连接到 ItemManagementComponent 上的 updateInventory 函数，然后从 NgOnChanges 调用硬连线函数，它就可以工作。只是当我将此 ID 作为变量传递时，它会以某种方式短路。

我有同样的 updateInventory 函数，它使用一个稍微不同的实现，它接受一个变量，所以我真的很难过。非常感谢任何帮助！

【问题讨论】：

标签： angular firebase google-cloud-firestore angularfire2 ngonchanges

【解决方案1】：

问题作为一个新手，我使用了很多代码示例来让事情正常工作，然后尝试弄清楚它为什么工作等等。在这种情况下，我发现的代码 sn-p 是使用 JSON.stringify 来设置 documentID 值.没有意识到后果，我把它留在了里面。

let cur = JSON.stringify(chng.currentValue);

我缺少的是控制台中一个非常微妙的（对我而言）线索。

**Console Return** service "X7hFhwDLzFIicl5uUCEX"

我认为引号只是控制台中的标准符号。直到一时兴起，我在视图组件的原始按钮上添加了一个 console.log，并注意到我从那里返回的结果没有引号：

service X7hFhwDLzFIicl5uUCEX

解决这个问题只需将上面的 stringify 行更改为：

let cur: string = chng.currentValue;

否则其余的代码似乎在做我想做的事。感谢任何看过的人！

【讨论】：