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

时间:2018-10-25 09:10:09

标签: arrays angular google-cloud-firestore angularfire2

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

1 个答案:

答案 0 :(得分:0)

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

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