对firebase实时数据库发出请求并使用角管过滤结果

我有一个web应用程序,它向firebase实时数据库请求用户信息。

服务调用以下方法时返回信息:

//searches db for user information
getUserInfo(uid){
    return this.db.list('users/', ref => ref.orderByKey().equalTo(uid)).valueChanges();
}

此方法在定义如下的管道内触发:

@Pipe({
 name: 'usernamePipe'
})

export class UsernameFilter implements PipeTransform{

constructor(private auth: AuthenticationService){
}

transform(uid: any):any {

//return item if neither filter nor list exists
if(!uid){
  return uid;
}

var user = {};

this.auth.getUserInfo(uid)
  .subscribe(res => {
    user = res;
    return user[0].userInfo.firstName;
  })
 }
}

<div class="message-summary" *ngFor="let msg of messageThread.messages | keys; let last = last" (click)="getThreadDetails(messageThread.messages)">
    <span class="time">{{msg.timeSent | date: 'short'}}</span>
    <span class="sender-name" *ngIf="msg.from !== 'admin'">{{msg.from | usernamePipe | async}}</span>
</div>

这个 keys pipe是另一个自定义管道,我用来将从初始请求返回到实时数据库的对象转换为数组,以便使用进行迭代 *ngFor

问题是,转换后的数据不会显示在DOM中,但如果我尝试将其记录到控制台,它会显示出来,这证明了该方法是可行的,但由于某种原因它不会显示。