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

当可观察的返回值已经是数组时，为什么要使用特定的变量？

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 ，否则它将保持空白。