AngularFire - 将来自 firestore 集合查询的数据推送到数组中

Question

我正在查询 Firestore 集合并成功检索结果。但是，我正在使用一个可排序的角度插件，它需要一个数组来排序。

我遇到的问题是项目被推入数组，但是当新项目进入时我找不到正确的位置来清除数组。如果不清除数组，返回的结果开始在数组中重复。

是否有人可以帮助重构下面的代码，以便我可以成功地将集合结果推送到数组中并在正确的位置清除它？

...
itemsArray = []
...

getData(){
    this.issueCollection = this.afs.collection<any>(`users/${user}/projects/${project}/issues`, ref => {
      return ref.orderBy('order');
    });
    this.issues = this.issueCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;

        this.itemsArray.push({ id, ...data });

        return { id, ...data };
      }))
    );
  }

HTML - 我如何需要 HTML 来显示结果

<ul>
   <li *ngFor="let issue of itemsArr">
      {{ issue.issueName }}
   </li>
</ul>

更新 - 这似乎有效

  getData(){
    this.issueCollection = this.afs.collection<any[]>(`users/${user}/projects/${project}/issues`, ref => {
      return ref.orderBy('issue_order');
    });
    this.issues = this.issueCollection.snapshotChanges().pipe(
      map(actions => {
      this.itemsArr = [];
      return actions.map(a => {

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


        this.itemsArr.push({ id, ...data });


        return { id, ...data };
      });
    }))
  }

Answer 1

我要做的是让它订阅该集合并执行此操作：

getData(){
    this.issueCollection = this.afs.collection<any[]>(`users/${user}/projects/${project}/issues`, ref => {
      return ref.orderBy('order');
    });
    this.issues = this.issueCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
            const data = a.payload.doc.data();
            const id = a.payload.doc.id;

            return { id, ...data };
        }))).subscribe((items: any[]) => {
          this.itemsArray = [];
          this.itemsArray = items;
       });
  }

这将允许您清空 itemsArray 并重新填充它。而不是只推送数组而不是清空它。