【问题标题】:Ionic 2 custom pipe for getting single user data from firebase用于从 firebase 获取单个用户数据的 Ionic 2 自定义管道
【发布时间】:2017-08-09 06:35:19
【问题描述】:

我正在使用 ionic 2 和带有 angularfire2 的 firebase

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

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

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

我有一个页面,可以从消息中获取所有详细信息。我只有那里的uid。如何使用用户 ID 从user 获取属性和名称?我创建了一个管道,但我的管道没有返回值。但是当我记录它时,它会显示在控制台中。 以下是管道文件。 管道/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);
});
}

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

【问题讨论】:

  • 你的管道变换方法没有返回任何值,这意味着管道在做任何事情

标签: angular typescript ionic-framework ionic2


【解决方案1】:

管道变化

    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 }}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-08-16
    • 1970-01-01
    • 2016-07-28
    • 2019-10-22
    • 2020-03-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多