AngularFire - 如何将集合项推送到数组中答案

【问题标题】：AngularFire - How to push collection items into an arrayAngularFire - 如何将集合项推送到数组中
【发布时间】：2018-10-25 09:10:08
【问题描述】：

我有一个来自 firestore 的 AngularFire 集合查询。我想将每个返回的项目推送到我的数组中。以下是我迄今为止尝试过的。

结果是只有最后一项被输入到数组中。如果我从查询中删除this.myArr = [];，所有结果都会在加载时出现在数组中。但是，正如您可以想象的那样，当添加新项目时，所有内容都会被读取到数组中，而不是最新的项目。我假设对于每个项目，数组都被清除，然后添加到，因此只添加最后一个项目。

如何确保每个项目都添加到数组中，而不仅仅是最后一个？

 this.myArr = [];

   ...

  issueData() {
    this.albumCollection = this.afs.collection<any>(`album/albumID}/issues`, ref => {
      return ref.orderBy('order');
    });

    this.issues = this.albumCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {

        const data = a.payload.doc.data();
        const id = a.payload.doc.id;

        this.myArr = [];
        this.myArr.push({ id, ...data });

        return { id, ...data };

      }))
    );
}

HTML

 <div *ngFor="let issue of myArr"> a </div>

【问题讨论】：

标签： arrays angular google-cloud-firestore angularfire2

【解决方案1】：

当你的 observable 已经返回你的数组时，为什么还要使用特定的变量？

issueData() {
    this.albumCollection = this.afs.collection<any>(`album/albumID}/issues`, ref => {
      return ref.orderBy('order');
    });

    this.issues = this.albumCollection.snapshotChanges().pipe(
        map(actions => actions.map(a => {

            const data = a.payload.doc.data();
            const id = a.payload.doc.id;


            return { id, ...data };

        }))
    );
}

然后，在您的模板中，您订阅您的 observable 以访问数据：

<div *ngFor="let issue of issues | async">{{issue | json}}</div>

如果你真的需要一个变量来缓存你的结果，你可以使用一个 tap 操作符（不需要将自己的数据推送到数组中）：

this.myArr = [];

issueData() {
    this.albumCollection = this.afs.collection<any>(`album/albumID}/issues`, ref => {
      return ref.orderBy('order');
    });

    this.issues = this.albumCollection.snapshotChanges().pipe(
       map(actions => actions.map(a => {

         const data = a.payload.doc.data();
         const id = a.payload.doc.id;


         return { id, ...data };

       })),
       tap(data => this.myArr = data)
   );
}

但不要忘记，您必须订阅 observable 才能提供 this.myArr，否则它将保持为空。

【讨论】：