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

【问题标题】：Making request to firebase realtime database and filtering result with angular pipe向firebase实时数据库发出请求并使用角管过滤结果
【发布时间】：2018-04-24 06:04:37
【问题描述】：

我有一个网络应用程序向 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 管道是另一个自定义管道，我用来将从初始请求返回到实时数据库的对象转换为数组，以便使用 *ngFor 进行迭代

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

【问题讨论】：

代码中的一个问题...stackoverflow.com/questions/39295854/…
抱歉你说的问题是什么？
据我所知，您正试图从subscribe 返回数据。
是的，你是对的，但尝试从.map 返回也不起作用。我尝试将.subscribe 换成.map 并保持其他所有内容不变，但DOM 也没有改变

标签： angular firebase firebase-realtime-database ngfor

【解决方案1】：

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

如果它在 Component 内，您会看到值因 change detection 策略而改变，但在这种情况下它在 Pipe 内strong> 和管道的工作方式不同。

来自Angular documentation：

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

所以值发生了变化，但视图没有更新，因为没有执行更改检测。

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

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

【讨论】：

是的，我试过了，但它也不更新 DOM
你能提供一个plunker吗？也许问题出在其他地方

【解决方案2】：

简化管道到下面的代码，摆脱订阅和附加功能似乎可以解决问题。此外，在 DOM 中调用管道后，还必须包含异步，否则不会显示任何内容。

return this.auth.getUserInfo(uid);

希望有人觉得这个有用，如果它不适合你，请随时给我发消息。

【讨论】：