Question

这是Angular 6和Firestore项目。我正在尝试遍历并更新articlesCollection中的每个文档。单击事件触发执行循环的方法。问题是，有时该方法仅在集合中循环一次。其他时候，它无限循环。我的方法有问题吗？有没有更好的方法来遍历和更新集合中的每个文档？

编辑：当我重新加载localhost：4200时，我第一次触发该方法循环一次。如果我第二次触发该方法，它将无限循环。

featureArticle(article) {
    const articleArray = this.articlesCollection.snapshotChanges();

    articleArray.subscribe( payload => {
      payload.forEach( item => {
        const ID = article.id;
        const articleID = item.payload.doc.data().id;
        const articleTITLE = item.payload.doc.data().title;
        const articleToUpdate = this.articlesCollection.doc(`${articleID}`);
        if (ID === articleID) {
          articleToUpdate.update({
            isFeature: true
          });
        } else {
          articleToUpdate.update({
            isFeature: false
          });
        }
        alert(`${articleTITLE} updated`); <-- LOOPS INFINITELY
      });
  });
}

模板：

<ng-container *ngFor="let article of articles | async">          
  <div (click)="featureArticle(article)">
     {{ article.title }} 
  </div>   
</ng-container>

Answer 1

您正在聆听变化并采取行动。由于您正在更改某些内容，因此对更改执行操作将触发侦听器。

您当然会陷入无尽的自我循环。

一种解决方案是：监听某些触发文档A上的更改。这可能是一个简单的文档，仅用于此目的：监听何时需要对文档B进行更改。然后，监听器上的onchanges首先触发您要调用的方法来更新任何文档B。因此，如果文档B被更新，则不会出现无限循环，因为如果文档A不会被文档A触发任何更改， B已更新。

Answer 2

好的，所以我的解决方法是在组件中创建一个空的IDs = []变量。在构造函数中，我用articlesCollection遍历了snapshotChanges().foreach()并将所有文档（文章）ID推入了数组。然后，我的featureArticle(article)方法可以遍历IDs数组，并将article.id与每个ID进行比较。如果有比赛，我做X。如果没有比赛，我做Y。

这样做的目的是编写一种方法，该方法将任何给定Article的isFeature?属性设置为true，同时将所有其他Articles isFeature?属性设置为false。 / p>

export class AdminArticleListComponent {
  articlesCollection: AngularFirestoreCollection<Article>;
  IDs: Array<any> = [];

  constructor( stuff here ) {
    this.articlesCollection = this.afs.collection('articles'); 
    this.articlesCollection.snapshotChanges().forEach( a => {
      a.forEach( item => {
        const id = item.payload.doc.data().id;
        this.IDs.push(id);
      });
    });

  }

  featureArticle(article) {
    for (let id of this.IDs) {
      const document = this.articlesCollection.doc(`${id}`);
      const articleID = article.id;
      if (id === articleID) {
        document.update({
          isFeature: true
        });
      } else if (id !== articleID) {
        document.update({
          isFeature: false
        });
      } else {
        console.log('Error updating feature Article');
      }
    }
  }

}

和模板：

<ng-container *ngFor="let article of articles | async">
  <tr>
      ... other cells ..
      <td class="featureCell" (click)="featureArticle(article)">
          <ng-container *ngIf="article.isFeature">
              <span class="greenCheckmark">&#9989;</span>
          </ng-container>
          <ng-container *ngIf="!article.isFeature">
              <span >&#9989;</span>
          </ng-container>
      </td>
  </tr>
</ng-container>

Angular 6和Firestore：循环浏览和更新AFS集合中的每个文档的最佳方法？

2 个答案: