Question

我正在使用angularfire2尝试更新我的Firestore文档。我有一个引用，我使用valueChanges然后订阅以获取数据，但是由于我在函数内部更新数据，因此由于值更改，它将继续调用它。我想到了使用first() from rxjs/operators的“黑客”解决方案，但是，必须有一种更好的方法来做到这一点。以下是我尝试实现的代码。

this.storeCollectionRef = this.afs.collection('storeInfo');
this.storeDocumentRef= this.storeCollectionRef.doc<StoreInfo>(window.localStorage.getItem("uid"));
this.storeDocumentRef.valueChanges().subscribe(data=>{
  console.log(data.itemcount);
  var pictures = storage().ref(`${userid}/${data.itemcount+1}`);
  pictures.putString(image, "data_url").then(()=>{
    pictures.getDownloadURL().then(url => {
      this.storeInfo.itemcount = data.itemcount+1;
      this.storeInfo.image = url;
      this.storeDocumentRef.update(this.storeInfo);
    })
  });

Answer 1

令人讨厌的是，official AngularFire2 docs中不包含使用Firestore文档的功能。但是，您可能知道，AngularFire2只是原始Firebase程序包的包装-旨在使在Angular环境中使用Firebase更加容易。查阅docs for the original Firebase package提供了以下示例，说明如何使用基本的Firebase软件包实现此目标：

var docRef = db.collection("cities").doc("SF");

docRef.get().then(function(doc) {
    if (doc.exists) {
        console.log("Document data:", doc.data());
    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
}).catch(function(error) {
    console.log("Error getting document:", error);
});

...这很简单。如果您使用的是原始Firebase软件包，则只需获取文档的引用，然后调用.get() ...（如果仅AngularFire2包含该功能）！深入研究，它似乎确实也包装了该方法。看一下AngularFire2 Firestore documents的源代码，底部的waaayyyyyyy，在valueChanges()之后的最后一个方法是get()！因此，看起来好像没有记录。

/**
   * Retrieve the document once.
   * @param options
   */
get(options?: firestore.GetOptions) {
    return from(this.ref.get(options)).pipe(
        runInZone(this.afs.scheduler.zone)
    );
}

我无法自己对此进行测试，因此我不能保证它会起作用。试试看，让我知道。作为最后的选择，如果您无法使AF2正常运行，则可以跳过针对该特定功能使用AngularFire2程序包，也可以将原始Firebase程序包导入该组件，而只需使用Firebase程序包的方法引用文档即可。

编辑：

如果不清楚，建议您尝试以下方法：

this.storeCollectionRef = this.afs.collection('storeInfo');
this.storeDocumentRef= this.storeCollectionRef.doc<StoreInfo>(window.localStorage.getItem("uid"));

this.storeDocumentRef.get().then( data => {
    console.log(data.itemcount);
    // ... etc...
    // continue doing your picture uploading stuff here
    // ...
});

如何使用angularfire2阅读和更新同一文档？

1 个答案: