从 Firebase 获取数据的管道答案

【问题标题】：Pipe to get data from Firebase从 Firebase 获取数据的管道
【发布时间】：2017-08-16 08:09:31
【问题描述】：

我的管道没有返回名字。当我硬编码一个名称时，它会返回。为什么？

在html中：

{{photo.uid | userName}}

管道：

import { Pipe, PipeTransform } from '@angular/core';
import { UserData } from './../providers/user-data';

@Pipe({name: 'userName'})
export class UserNamePipe implements PipeTransform {
  name: string;

   constructor(private userData:UserData){}

  transform(value:any, args:string[]) {
   this.userData.getSpeseficUserData(value).subscribe((data:any) => {
     this.name = data.firstName;
     return this.name;
   });
 }
}

getSpeseficUserData():

getSpeseficUserData(uid:any){
  return Observable.create((observer: any) => {
    firebase.database().ref('users/' + uid).once('value').then((snapshot) => {
        observer.next(snapshot.val());
    })
  });
}

【问题讨论】：

标签： angular firebase firebase-realtime-database ionic2 angular2-pipe

【解决方案1】：

查看实际操作：plunker

首先你必须在 transform 方法中返回一个 observable 并使用 async 管道来显示你的数据：

管道：

transform(value:any, args:string[]) {
   return this.userData.getSpeseficUserData(value).map((data:any) => {
     this.name = data.firstName;
     return this.name;
   });
 }

模板：

{{photo.uid | userName | async}}

【讨论】：

我添加了一个 plunker 示例