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

AngularFire-如何将集合项推入数组

1 个答案: