Угловой Пожарный магазин с Await - PullRequest
Новая
       9

Угловой Пожарный магазин с Await

0 голосов
/ 14 февраля 2019

Посмотрев на этот ответ, я попытался использовать async / await с вызовом firestore, но я думаю, что что-то упустил.

Я пытаюсь использовать Snapshot, чтобы получить коллекцию«шестнадцатеричные» документы для шестнадцатеричной сетки.(У меня было значение valueChanges, но потом я понял, что мне понадобятся метаданные) Я хочу получить гексы, затем отсортировать их по строкам и, наконец, вернуть их компоненту.Я вижу, что он возвращается до того, как снимок и действия канала завершены, поскольку это пустой "hexRows ['test']", когда консоль вышла из системы как "true".Будем весьма благодарны за любые указания о том, где я иду не так.

TS:

Сервис: 

async getHexesInRows(){
    let hexRows = {test: true}
    this.hexCollection = this.db.collection('hexes', ref=> ref.orderBy('id').limit(5))

this.hexes = await this.hexCollection
  .snapshotChanges()
  .pipe(
    map(actions => actions.map( hex => {
      const data = hex.payload.doc.data()
      const uid = hex.payload.doc.id
      return {uid, ...data}
    })),
    map(data => {
      data.forEach((hex, index) => {
        let rowNum = Math.floor(index / 10)
        hexRows = {test: false}

        if(hexRows[`row${rowNum}`] == undefined){
          hexRows[`row${rowNum}`] = []
        }
        hexRows[`row${rowNum}`].push(hex)
      })
      return data
    })
  )
console.log('Rows', hexRows);
console.log('Hexes', this.hexes);

return hexRows
  }

Компонент 

hexRows: any

  constructor(public dialog: MatDialog, public afs: FirestoreService) { }
  ngOnInit() {
    this.hexRows = this.afs.getHexesInRows()
  }

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Вы не можете ждать Observable как Promise, вместо этого вы подписываетесь на Observable, где вам нужны данные из Observable.Обычно вы возвращаете Наблюдаемые из ваших Служб и подписываетесь на них в своих Компонентах.

Возвращаете Наблюдаемое из вашей Службы 

getHexesInRows(){
  this.hexCollection = this.db.collection('hexes', ref => ref.orderBy('id').limit(5))

  return this.hexCollection
    .snapshotChanges()
    .pipe(
      map(actions => actions.map( hex => {
        const data = hex.payload.doc.data()
        const uid = hex.payload.doc.id
        return {uid, ...data}
      })),
      map(data => {
        let hexRows = {test: true}
        data.forEach((hex, index) => {
          let rowNum = Math.floor(index / 10)
          hexRows = {test: false}

          if(hexRows[`row${rowNum}`] == undefined){
            hexRows[`row${rowNum}`] = []
          }
          hexRows[`row${rowNum}`].push(hex)
        })
        return hexRows
      }),
      // tap(hexRows => this.hexRows = hexRows), // if you need the hexes in your Service but you usually shouldn't
      tap(hexRows => console.log('Rows', hexRows)) // if you want to log something in your Service
    );
}

Подпишитесь на Наблюдаемое вваш компонент 

hexRows: any

constructor(public dialog: MatDialog, public afs: FirestoreService) { }

ngOnInit() {
  this.afs.getHexesInRows().subscribe(hexes => this.hexRows = hexes);
}
0 голосов
/ 14 февраля 2019

Вы не можете ждать Observable, попробуйте изменить его на обещание, добавив toPromise

this.hexCollection
  .snapshotChanges()
  .pipe(
    map(actions => actions.map( hex => {
      const data = hex.payload.doc.data()
      const uid = hex.payload.doc.id
      return {uid, ...data}
    })),
    map(data => {
      data.forEach((hex, index) => {
        let rowNum = Math.floor(index / 10)
        hexRows = {test: false}

        if(hexRows[`row${rowNum}`] == undefined){
          hexRows[`row${rowNum}`] = []
        }
        hexRows[`row${rowNum}`].push(hex)
      })
      return data
    }),
    toPromise()
  )
...