Angular 2+如何返回Observable内的值？Firebase用户名查询问题

你的问题核心在于Observable的异步特性和Angular变更检测的机制，咱们一步步拆解并解决：

为什么之前的方案会失效？ #

• 方案1返回undefined：因为subscribe里的代码是异步执行的，当你return username的时候，Firebase的请求还没完成，username还没被赋值，自然返回undefined。
• 方案2所有元素显示相同用户名：你用了一个共享的this.username属性，每次新的订阅完成都会覆盖它的值，最后所有列表项都会显示最后一次请求回来的用户名。

推荐的解决方案 #

方法1：使用Async管道（最直接的异步处理方式） #

Angular的async管道专门用来处理Observable/Promise的异步流，它会自动帮你完成订阅、更新视图和取消订阅，完美适配模板里的异步场景。

修改组件里的函数，直接返回Observable，不需要手动订阅：

constructor(public db: AngularFireDatabase){}

// 返回Observable<string>，而不是直接返回字符串
getUsername$(id: string): Observable<string> {
  return this.db.object('users/' + id).valueChanges()
    .pipe(
      map(user => user?.['username']) // 用可选链避免空值报错
    );
}

然后在模板里用async管道订阅这个Observable：

<div *ngFor="let item of items"> 
  <p>{{ getUsername$(item.userId) | async }}</p> 
</div>

方法2：预加载所有用户数据（性能更优） #

上面的方法虽然简单，但如果你的列表项很多，每次循环都会发起一个Firebase请求，会造成不必要的资源浪费。更高效的方式是提前把所有用户数据加载到组件里，然后直接在模板里查找：

users: { [key: string]: { username: string } } = {};

constructor(public db: AngularFireDatabase){}

ngOnInit(): void {
  // 一次性获取所有用户数据
  this.db.object('users/').valueChanges().subscribe(usersData => {
    this.users = usersData as { [key: string]: { username: string } };
  });
}

模板里直接通过userId查找用户名：

<div *ngFor="let item of items"> 
  <p>{{ users[item.userId]?.username }}</p> 
</div>

这里的?.是可选链操作符，防止用户数据还没加载完成或者userId不存在时出现报错。

额外提醒 #

尽量避免在模板的*ngFor里直接调用返回值的函数，因为Angular的变更检测会频繁触发这个函数，可能导致重复请求或者性能问题。上面的两种方法都规避了这个问题：方法1用async管道处理异步，方法2提前加载数据直接查找。

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