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並重新填充它。 而不是僅推入數組並且永遠不要將其清空。