Angular中如何从Firestore返回的对象中获取单个值并显示

核心问题 #

1. 组件未将获取到的数据赋值给组件实例属性，HTML模板无法访问到data变量
2. HTML错误使用async管道（data是普通对象而非Observable）
3. 代码存在语法闭合错误

步骤1：修复服务端代码的语法错误 #

删除多余的闭合}：

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

步骤2：修复组件代码，将数据赋值给组件属性 #

先在组件类中定义公共属性data，获取数据后赋值给该属性，同时补全语法闭合：

// 组件类中定义属性
data: dataModel | undefined;

// 路由参数获取与数据请求部分
const id = this.activatedRoute.snapshot.paramMap.get("id");      
if (id) { // 增加id空值判断，避免报错
  this.dataService.getProfile(id).then(fetchedData => {
    this.data = fetchedData; // 将数据赋值给组件属性
    console.log(this.data.email); 
  });
}

步骤3：修复HTML模板代码 #

去掉多余的async管道，直接访问组件的data属性：

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

可选优化：改用Observable获取数据（更符合Angular风格） #

如果希望使用async管道，可修改服务返回Observable而非Promise：

// 服务端代码修改为返回Observable
getProfile(id:string) {
  return this.db 
    .collection<dataModel>('dataColl')
    .doc(id)
    .valueChanges(); // 使用valueChanges()返回Observable
}

// 组件代码修改为订阅Observable（或直接在模板用async）
data$: Observable<dataModel | undefined>;

ngOnInit() {
  const id = this.activatedRoute.snapshot.paramMap.get("id");      
  if (id) {
    this.data$ = this.dataService.getProfile(id);
  }
}

// HTML模板使用async管道
<div *ngIf="data$ | async as data">
  Email: {{data.email}}
</div>

内容的提问来源于stack exchange，提问作者user17449555