是否有一种方法来存储检索的文档从子集合Firebase到一个数组显示其信息?AngularFirestore

Question

我正在用Angular开发一个网站，目前有一个困难，阻止我将从Firebase子集合中检索到的文档放在数组中。

1. data.service.ts文件中的getBusStopsByRoute(id)函数

export class DataService {
constructor(private afs: AngularFirestore) { }
//retrieving documents from bus stop sub-collection
getBusStopsByRoute(id:string){
return this.afs.doc("BusRoute/"+id).collection('busStopList/').snapshotChanges()
}
}

2. getBusStops()函数在busStops.component.ts文件

//function from Ts file for storing retrieved documents in busStops array
getBusStops(id:string){
this.dataApi.getBusStopsByRoute(id).subscribe(res=>{
this.busStops=res.map((e:any)=>{    //busStops declared as any
const data = e.payload.doc.data();
data.id = e.payload.doc.id;
return data;
})
console.log('inside subscribe function', this.busStops);
})
console.log('Outside subscribe function', this.busStops);
}

3. 声明busStop并调用。getbusstops (id)函数

export class AddBusrouteComponent implements OnInit {
form !: FormGroup;
title!: string;
routeNo !: string;
description !: string;
destination !: string;
arrival !: string;
id !: string;
buttonName!: string;
busStops!: any
constructor(
private fb : FormBuilder,
@Inject(MAT_DIALOG_DATA) data: any,
private dataApi: DataService,
private dialogRef:  MatDialogRef<AddBusrouteComponent>
) {
this.id = data.id;
this.title = data.title;
this.routeNo = data.routeNo;
this.description = data.description;
this.destination = data.destination;
this.arrival = data.arrival;
this.buttonName = data.buttonName;
// this.busStops = data.busStops;  //hard-coded
}

ngOnInit(): void {
this.getBusStops(this.id);
this.form = this.fb.group({
id:[this.id, []],
routeNo:[this.routeNo, [Validators.required]],
description: [this.description, [Validators.required]],
destination: [this.destination, [Validators.required]],
arrival: [this.arrival, [Validators.required]],
busStops: this.busStops
})
console.log('formValue: ', this.form.value)
}

4. 控制台结果

Outside subscribe function undefined
formValue:  
{id: 'BusRoute1671550149650', routeNo: 'aasd', description: 'sdasd', destination: 'dasd', arrival: 'asd', …}
arrival: "asd"
busStops: null
description: "sdasd"
destination: "dasd"
id: "BusRoute1671550149650"
routeNo: "aasd"
inside subscribe function (3) [{…}, {…}, {…}]

我试图将检索到的文档存储在声明的数组中("busStops")，但是console.log方法返回"Undefined"根据我的发现，原因是数组只能在订阅函数2中定义。但不能在函数之外。

可以在2中看到。，我在订阅函数内外都使用了console.log方法来显示数组(busStops)值。两种结果是不一样的。4. 是结果的截图。

是否可以将这些检索到的文档保存在数组中?

Answer 1

当您获得bugStops时，您实际上正在对Firebase进行网络调用。因此，在你打了这个电话之后，你不能马上得到信息。这就是为什么当您在外面打印日志时得到Undefined的原因。

另一方面，如果您subscribe到网络呼叫。在网络调用完成后，将调用订阅函数中的所有代码。这就是为什么内部日志打印在外部日志之后。

要保存数据，只需在subscribe函数作用域中定义一个数组，并将数据放入subscribe函数内的数组中。

此外，您还可以考虑使用Promise graph，这样您就可以编写一些代码，如:

const array = await getBusStops();