Коллекция Angular Firestore возвращается несколько раз - PullRequest
Новая
       31

Коллекция Angular Firestore возвращается несколько раз

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

Я пытаюсь загрузить некоторые изображения с помощью Angular Firestore и показать их после в виде сетки в моем приложении.

моя функция загрузки: 

this.imgPic.getPictures(options).then((results) => {
          for (var i = 0; i < results.length; i++) {
              console.log('Image URI: ' + results[i]);
              const id = this.db.createId();
              const time = Date.now();
              const path = "events/"+this.eventId+"/"+time+".jpg";

              this.handler.convertToDataURLviaCanvas(WebView.convertFileSrc(results[i]), "image/jpeg")
              .then( base64Img => {

                let temp = base64Img;
                let captureDataUrl = temp;

                this.handler.uploadPicture(captureDataUrl, path).then((response) =>{
                  const eventRef = this.db.collection('events').doc(this.eventId).collection("images")
                  eventRef.doc(id).set({
                    title: "Bild Titel",
                    uTitle: "Untertitel",
                    url: response
                  }).then(success =>{
                    console.log("Bild erfolgreich hochgeladen")
                  })

                })
              }).catch(error =>{
                console.log("Fehler")
                console.log(error)
              })
          }
        }, (err) => {console.log(err) });

моя функция, которую я использую дляполучить фотографии 

getEventDetails(eventID){

let eventImages: AngularFirestoreCollection<any>;
let eventImages$: Observable<any>;
let event = this.db.collection("events").doc(eventID)
let details: Details

return event.snapshotChanges().pipe(mergeMap(changes =>{

  const data  = changes.payload.data();
  const id = changes.payload.id;
  let eventReturn = {id, images: [], ...data};

  return this.db.collection('events').doc(id).collection('images').valueChanges().pipe(map( (eventData: eventImage) => {
    console.log(eventData)
    for(let key in eventData){
      eventReturn.images.push(eventData[key])
    }

    return eventReturn
  }))

}))

Загрузка в хранилище и передача данных в базу данных работает без проблем.Кроме того, все картинки отображаются, если я выхожу на экран, где вызывается функция.Проблема возникает, когда я загружаю новые картинки.После этого он несколько раз представляет мне изображения.

Позвольте мне показать выходные данные функции getEventDetails () один раз перед циклом `for (let key in eventData) и после того, как я вернул значение.

Я понял, что есть странное поведение.я попытался загрузить 4 изображения.

после первого вывода выводит мне массив 

Array(1)
0: {title: "Bilder Title", uTitle: "Untertitel", url: "picture1"}

, а второй - объект из наблюдаемой, который включает в себя массив. 

Object
description: "description"
id: "4C0diIf7mGZZ4smA8dvU"
images: Array(1)
0: {title: "Bilder Title", uTitle: "Untertitel", url: "picture1"}
length: 1
__proto__: Array(0)

на следующем шаге (второе изображение) массив: 

(2) [{…}, {…}]
0: {title: "Bild Titel", uTitle: "Untertitel", url: "picture2"}
1: {title: "Bilder Title", uTitle: "Untertitel", url: "picture1"}
length: 2
__proto__: Array(0)

, но наблюдаемый объект содержит 10 записей для массива 

Object
description: "description"
id: "4C0diIf7mGZZ4smA8dvU"
images: Array(10)
0: {title: "Bilder Title", uTitle: "Untertitel", url: "picture1"}
1: {title: "Bild Titel", uTitle: "Untertitel", url: "picture2"}
2: {title: "Bilder Title", uTitle: "Untertitel", url: "picture1"}
3: {title: "Bild Titel", uTitle: "Untertitel", url: "picture3"}
4: {title: "Bild Titel", uTitle: "Untertitel", url: "picture2"}
5: {title: "Bilder Title", uTitle: "Untertitel", url: "picture1"}
6: {title: "Bild Titel", uTitle: "Untertitel", url: "picture3"}
7: {title: "Bild Titel", uTitle: "Untertitel", url: "picture2"}
8: {title: "Bilder Title", uTitle: "Untertitel", url: "picture1"}
9: {title: "Bild Titel", uTitle: "Untertitel", url: "picture4"}
length: 10
__proto__: Array(0)
__proto__: Object

на следующем шаге массива3, но объект по-прежнему содержит 10 записей.я думаю, что где-то в моей getEventDetails() произошла ошибка при передаче наблюдаемого обратно в подписку.

есть ли возможность, как я могу это изменить, или, может быть, как я могу загрузить фотографии и установить все пути вбаза данных сразу, так что наблюдаемое просто вызывается один раз

было бы неплохо, если бы кто-то из вас дал мне подсказку

...