Infinit loop with firebase and angular

问题

I'm having an infinit loop problem saving my data on firebase with this.db.collection('users').doc(this.useruid).update({Info: this.currentInfo})

private currentInfo:string[];
private useruid: string;
...
constructor(private AngularAuth: AngularFireAuth,
    private db:AngularFirestore) { }

...

sendInfo(text:string){
    this.useruid = this.AngularAuth.auth.currentUser.uid;
    this.db.collection('users').doc(this.useruid).snapshotChanges().subscribe(a=>{
      const data = a.payload.data() as {name:string, Info:string[]};
      data.Info.forEach(element => {
        this.currentInfo.push(element);
      });
      this.currentInfo.push(text);
      this.db.collection('users').doc(this.useruid).update({
        Info: this.currentInfo
      })...
    })
}

As an example, imagine I currently have as currentInfo = ["a","b","c"] and as text = "d", after y run the method sendInfo( ), i get a loop with: ["a","b","c","d","a","b","c","d","d","a","b","c","d","a","b","c","d","d","d"...] and so on.

回答1:

To update a document based on its current value, use a transaction:

var userDocRef = collection('users').doc(this.useruid);

return db.runTransaction(function(transaction) {
    // This code may get re-run multiple times if there are conflicts.
    return transaction.get(userDocRef).then(function(userDoc) {
        if (!userDoc.exists) {
            throw "Document does not exist!";
        }

        const data = userDoc.data() as {name:string, Info:string[]};
        data.Info.forEach(element => {
          this.currentInfo.push(element);
        });
        this.currentInfo.push(text);

        transaction.update(userDocRef, { Info: this.currentInfo });
    });
}).then(function() {
    console.log("Transaction successfully committed!");
}).catch(function(error) {
    console.log("Transaction failed: ", error);
});

In addition to preventing the infinite loop that you currently have, this also prevents multiple users from overwriting each other's results if they want to update the document at almost the same time.

回答2:

You can use pipe and first to get the values that you need and then update again.

sendInfo(text: string) {
    this.useruid = this.AngularAuth.auth.currentUser.uid;
    this.db.collection('users').doc(this.useruid).valueChanges().pipe(first()).subscribe(a => {
        const data = a.payload.data() as {name:string, Info:string[]};
        data.Info.forEach(element => {
            this.currentInfo.push(element);
        });
        this.currentInfo.push(text);
    }
    this.db.collection('users').doc(this.useruid).update({
        Info: this.currentInfo
    })
}

The first method of rxjs is used to get the first value emitted by an observable. After that, it unsubscribes from the observable.

来源：https://stackoverflow.com/questions/61066798/infinit-loop-with-firebase-and-angular