代码之家 › 专栏 › 技术社区 › user3640687

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

ngfor firebase-realtime-database firebase angular

2

user3640687 · 技术社区 · 8 年前

我有一个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中,但如果我尝试将其记录到控制台,它会显示出来,这证明了该方法是可行的,但由于某种原因它不会显示。

2 回复 | 直到 8 年前

1

0

Christian Vincenzo Traina 8 年前

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

组成部分 ,您会看到值因 更改检测 战略,但在这种情况下,它是在管

从…起 Angular documentation :

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

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

管可以将当前管道转换为 impure pipe 只需在元数据中添加一个字段:

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

2

0

user3640687 8 年前

将管道简化为下面的代码,去掉订阅和附加功能似乎可以达到目的。还有异步有

return this.auth.getUserInfo(uid);

希望有人觉得这个有用,如果对你不起作用,请随时给我留言。