Question

当我单击视图链接时，我想从集合中检索并显示一个文档。目前，我已成功路由到视图页面，但无法显示所需文档的属性。这是我正在使用的代码

schedule.service.ts

getSchedule(id: string) {
  return this.afs
    .collection("schedules")
    .doc(id)
    .ref.get()
    .then(function(doc) {
      doc.data();
      console.log(doc.data()); //i see the data logged on my console correctly
    });
}

然后在view.component.ts文件中

ngOnInit() {
  this.scheduleDetail();
}

scheduleDetail() {
  const id = this.route.snapshot.paramMap.get("id");
  console.log(id); //I see the doc id correctly

  this.schedule = this.scheduleService.getSchedule(id);
  console.log(this.schedule);//I can't see the correct doc data
}

console.log(this.schedule)不会像service.ts文件中的console.log(doc.data())那样记录正确的数据。相反，我看到了这个

ZoneAwarePromise {__ zone_symbol__state：null，__zone_symbol__value：Array（0）} 从服务中获取文档数据到组件中的正确方法是什么？

Answer 1

您必须使用正确的Promise来解决：

getSchedule(id: string) {
  return this.afs
    .collection("schedules")
    .doc(id)
    .ref.get()
    .then(function(doc) {
      return doc.data();   // here...
    });
}

和

scheduleDetail() {
  const id = this.route.snapshot.paramMap.get("id");
  console.log(id); 

  this.scheduleService.getSchedule(id).then(data => {
    console.log(data);  // ... and here
  });
}

在Angle中检索单个Firestore文档

1 个答案: