要使用AngularFire连接用户名，您可以使用AngularFire的join操作符来将用户ID与用户集合中的用户名进行关联。下面是一个示例代码来演示如何使用AngularFire连接用户名：

首先，确保您已经在您的Angular项目中安装并配置了AngularFire。

然后，在您的组件中，导入所需的AngularFire模块和操作符：

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

接下来，注入AngularFirestore服务，并使用combineLatest和map操作符来连接用户名：

@Component({
  selector: 'app-user-list',
  template: `
    

      
{{ user.name }}
    
  `,
})
export class UserListComponent {
  users$ = combineLatest(
    this.afs.collection('users').valueChanges(),
    this.afs.collection('usernames').valueChanges()
  ).pipe(
    map(([users, usernames]) => {
      return users.map(user => {
        const username = usernames.find(u => u.uid === user.uid);
        return { ...user, name: username.name };
      });
    })
  );

  constructor(private afs: AngularFirestore) {}
}

在上面的代码中，我们使用combineLatest操作符将users集合和usernames集合中的数据合并为一个Observable。然后，我们使用map操作符来遍历users数组，并使用find方法在usernames数组中找到相应的用户名。最后，我们将用户对象和用户名合并为一个新的对象，并将其推送到最终的users$ Observable。

最后，在您的模板中，使用async管道来订阅并显示users$ Observable 中的数据。

请注意，上述示例假设您的Firebase数据库中有一个名为users的集合，其中包含每个用户的信息，并且有一个名为usernames的集合，其中包含每个用户的用户名。确保根据您的数据库结构和需求进行相应的更改。

希望这可以帮助到您！