Ionic 2自定义管道,用于从firebase

时间:2017-08-08 15:32:07

标签: angular typescript ionic-framework ionic2

我正在使用离子2和firebase与angularfire2

我在firebase中有2个名为messagesusers的节点。以下是结构。

/messages
  |-- uid1
  |    |-- message
  |    |-- uid1
  |    |-- time
  |
  |-- uid2
       |-- message
       |-- uid1
       |-- time

  /users
    |--uid1    
    |    |-- name
    |    |-- email
    |
    |--uid2
         |--name
         |--email

我有一个页面,我可以从消息中获取所有详细信息。我只有那里的uid。如何从user用userid获取propic和名称?我创建了一个管道,但我的管道没有返回值。但是当我记录它时,它会显示在控制台中。 以下是管道文件。的管/ singleuser.ts

import { Pipe, PipeTransform } from '@angular/core';
import { FirebaseListObservable,FirebaseObjectObservable, 
AngularFireDatabase } from 'angularfire2/database';
import { FirebaseApp } from 'angularfire2';
@Pipe({
  name: 'singleuser',
})
export class SingleuserPipe implements PipeTransform {
obs: FirebaseObjectObservable<any>;
constructor(private angdb: AngularFireDatabase){

}
transform(value: string, args) {

   this.obs = this.angdb.object('/users/'+value);
   this.obs.subscribe((succ) => {
     console.log(succ[args]);
     return "ss";
   });
  }
}

这是列表应该显示的 dashboard.html

<ion-list *ngFor="let data1 of ddata">
<ion-item *ngFor="let data of data1" (click)="gotosingleuser(data.$key)">
  <ion-avatar item-start>
    <img src="">
  </ion-avatar>
  <h2>Cher</h2>
  <p>Ugh. As if.</p>
  {{data.$key | singleuser:"email" }}
</ion-item>

以下是 dashboard.ts 中的功能,其中加载了消息并提取了用户ID。

loadmsg(uid){
this.obs = this.angdb.list("/messages");
this.obs.subscribe((data) => {
  this.ddata = Array.of(data);
  console.log(this.ddata);
});
}

在此应用程序中,所有消息仅发送给管理员。它就像一个查询系统..

1 个答案:

答案 0 :(得分:2)

更改管道

    import 'rxjs/add/operator/map';
        ...
    transform(value: string, args) {

      this.obs = this.angdb.object('/users/'+value);
        return this.obs.map(user => {
          return user[args]
        });
      }

并在html中

{{(data.$key | singleuser:"email") | async }}