从 Angular 返回的对象中获取单个值

Question

我有一个从数据库和组件中获取所有数据的服务，我无法从它返回的对象中返回单个值。以下是在服务中获取数据。我只想在 HTML 中显示来自 firestore 的“电子邮件”。

getProfile(id:string) {
  return this.db 
  .collection<dataModel>('dataColl' )
  .doc(id)
    .ref.get()
    .then(function(doc) {
      return doc.data();  .
    });
  
 }
}

在组件中

  const id = this.activatedRoute.snapshot.paramMap.get("id");     
  this.dataService.getProfile(id).then(data => {
  console.log(data.email); 

HTML

 <div *ngIf= "data">
Email: {{data.email | async}}

HTML 页面上不显示任何内容

Answer 1

此问题已修复。

const id = this.activatedRoute.snapshot.paramMap.get("id");     
  this.dataService.getProfile(id).then(data => {
  this.data = data;
  console.log(data.email); 
})

HTML

 <div *ngIf ="data" >
    Email: {{data.email}}
  </div>