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

Question

我有一个来自 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>

Answer 1

当您的可观察对象 return 已经是您的数组时，为什么要使用特定变量？

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 };

        }))
    );
}

然后，在您的模板中，订阅您的可观察对象以访问数据：

<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)
   );
}

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

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

AngularFire - How to push collection items into an array

arrays

angularfire2

angular

google-cloud-firestore