AngularFire - Как поместить элементы коллекции в массив - PullRequest
Новая
       38

AngularFire - Как поместить элементы коллекции в массив

0 голосов
/ 25 октября 2018

У меня есть запрос на сбор 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 голосов
/ 26 октября 2018

Почему вы используете определенную переменную, когда ваша наблюдаемая возвращает уже ваш массив? 

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>

Если вам действительно нужна переменная для кэширования вашего результата, вы можете использовать оператор касания (не нужно вставлять данные в массив): 

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, иначе она останется пустой.

...