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

は、最初のあなたはreturしなければなりませんnは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}}