Angular 向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>

{{msg.timeSent | date:'short'}
{{msg.from | usernamepippe | async}

keys

管道是另一个自定义管道，我使用它将从初始请求返回到实时数据库的对象转换为数组，以便使用

*ngFor

---

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

之所以发生这种情况，是因为您正在执行异步任务，并等待它完成以更改值

如果它位于组件内部，您会看到由于更改检测策略而更改的值，但在这种情况下，它位于管道内部，管道的工作方式不同

发件人：

Angular通过在每个DOM事件（每次击键、鼠标移动、计时器计时和服务器响应）之后运行的更改检测过程来查找对数据绑定值的更改。这可能很贵。Angular尽可能适当地降低成本。 Angular在使用管道时选择一种更简单、更快的变化检测算法

因此，值会更改，但视图不会更新，因为不会执行更改检测

若要在管道内部发生事件的情况下执行完整的更改检测周期，您可以将当前管道转换为只需在元数据中添加一个字段即可：

@Pipe({
 name: 'usernamePipe',
 pure: false
})

---

将管道简化为下面的代码，去掉订阅和附加功能似乎可以达到目的。另外，在DOM中调用管道后，必须包含异步，否则不会显示任何内容

return this.auth.getUserInfo(uid);

---

希望有人觉得这很有用，如果它对您不起作用，请随时给我发消息。

是的，我尝试过，但它不会更新DOM。您能提供一个plunker吗？也许你的代码中还有一个问题。。。对不起，你说的是什么问题？据我所知，你正试图从

订阅

返回数据。是的，你是对的，但试图从

返回。map

也不起作用。我尝试将

.subscribe

替换为

.map

，并保持其他内容不变，但DOM中也没有任何更改