Angular Firestore с Await
Посмотрев ответ это, я попытался использовать async/await с вызовом firestore, но думаю, что что-то упускаю.
Я пытаюсь использовать Snapshot, чтобы получить коллекцию «шестнадцатеричных» документов для шестнадцатеричной сетки. (У меня работало valueChanges, но потом я понял, что мне понадобятся метаданные). Я хочу получить шестнадцатеричные значения, затем рассортировать их по строкам и, наконец, вернуть их компоненту. Я вижу, что он возвращается до того, как действия моментального снимка и канала будут завершены, поскольку он пуст «hexRows ['test']», когда консоль выходит из системы как «true».
ТС:
Услуга:
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.info('Rows', hexRows);
console.info('Hexes', this.hexes);
return hexRows
}
Компонент
hexRows: any
constructor(public dialog: MatDialog, public afs: FirestoreService) { }
ngOnInit() {
this.hexRows = this.afs.getHexesInRows()
}
Ответы 2
Вы не можете ждать 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()
)
Вы не можете ждать Observable, как Promise, вместо этого вы подписываетесь на Observable, где вам нужны данные из Observable. Обычно вы возвращаете Observables из своих Сервисов и подписываетесь на них в своих Компонентах.
Возврат наблюдаемого из вашего сервиса
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.info('Rows', hexRows)) // if you want to log something in your Service
);
}
Подпишитесь на Observable в вашем компоненте
hexRows: any
constructor(public dialog: MatDialog, public afs: FirestoreService) { }
ngOnInit() {
this.afs.getHexesInRows().subscribe(hexes => this.hexRows = hexes);
}
@gv0000 Я только что заметил, что вернул data в последнем map вместо hexRows, и исправил это. Вы должны получить hexRows сейчас в своем компоненте при подписке, и вам не придется выполнять сортировку в вашем компоненте. Как правило, рекомендуется переносить логику обработки данных в службу и по возможности снабжать компоненты чистыми данными.
В итоге я просто подписался на шестнадцатеричные значения в своем компоненте и выполнил сортировку внутри этой подписки, так что это не совсем то, что вы описали, но вы определенно помогли мне на 95% пути, лол. Просто чтобы уточнить, если кто-то пытается сделать что-то подобное.