管道从 Firebase 获取数据

Question

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

在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());
    })
  });
}

Answer 1

查看实际效果：plunker

首先，您必须 return 在 transform 方法中观察到一个对象，然后使用 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}}

管道从 Firebase 获取数据

Pipe to get data from Firebase

firebase

firebase-realtime-database

ionic2

angular2-pipe

angular