«Объединение» Firebase запросов в Angularfire2

Question

Update:

Проблемы, я сталкивался с полями пустых значений пришлось делать с несуществующими ключами в моей базе данных, поэтому большая часть речи не будет применяться к вашему вопрос. Если вы ищете способ «присоединиться» к запросам в AngularFire2, принятый ниже ответ прекрасно справляется с этим. В настоящее время я использую combineLatest вместо forkJoin. Для этого вам нужно import 'rxjs/add/observable/combineLatest';.

У меня есть следующая денормализованный Firebase структура:

members 
    -memberid1 
    -threads 
     -threadid1: true, 
     -threadid3: true 
    -username: "Adam" 
    ... 

threads 
    -threadid1 
     -author: memberid3 
     -quality: 67 
     -participants 
     -memberid2: true, 
     -memberid3: true 
    ... 

Я хочу, чтобы сделать username в моем threads зрения, которая сортируется по quality.

Моя служба:

getUsername(memberKey: string) { 
    return this.af.database.object('/members/' + memberKey + '/username') 
} 

getFeaturedThreads(): FirebaseListObservable<any[]> { 
    return this.af.database.list('/threads', { 
     query: { 
      orderByChild: 'quality', 
      endAt: 10 
     } 
    }); 
} 

Мой компонент:

ngOnInit() { 
    this.threads = this.featuredThreadsService.getFeaturedThreads() 
    this.threads.subscribe( 
     allThreads => 
     allThreads.forEach(thisThread => { 
      thisThread.username = this.featuredThreadsService.getUsername(thisThread.author) 
      console.log(thisThread.username) 
     }) 
    ) 
} 

По какой-то причине это регистрирует то, что выглядит как невыполненных наблюдаемыми на консоль.

Я хотел бы получить эти значения в свойстве threads, так что я могу сделать его на мой взгляд, как это:

<div *ngFor="let thread of threads | async" class="thread-tile"> 
    ... 
    {{threads.username}} 
    ... 
</div> 

Обновлено: console.log для allThreads и thisThread

Обновлено: подписка на GetUserName()

this.featuredThreadsService.getUsername(thisThread.author) 
     .subscribe(username => console.log(username)) 

Результатом этого является объекты без каких-либо значений:

Answer 1

Вы можете составить наблюдаемым на основе getFeaturedThreads, что опрашивает членов и заменяет значения в свойстве participants каждого потока с именами пользователей:

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/forkJoin'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/first'; 
import 'rxjs/add/operator/switchMap'; 

let featuredThreadsWithUserNames = this.getFeaturedThreads() 

    // Each time the getFeaturedThreads emits, switch to unsubscribe/ignore 
    // any pending member queries: 

    .switchMap(threads => { 

    // Map the threads to the array of observables that are to be 
    // joined. When the observables emit a value, update the thread. 

    let memberObservables = []; 
    threads.forEach(thread => { 

     // Add the author: 

     memberObservables.push(this.af.database 
     .object(`members/${thread.author}`) 
     .first() 
     .do(value => { thread.author = value.username; }) 
    ); 

     // Add the participants: 

     Object.keys(thread.participants).forEach(key => { 
     memberObservables.push(this.af.database 
      .object(`members/${key}`) 
      .first() 
      .do(value => { thread.participants[key] = value.username; }) 
     ); 
     }); 
    }); 

    // Join the member observables and use the result selector to 
    // return the threads - which will have been updated. 

    return Observable.forkJoin(...memberObservables,() => threads); 
    }); 

Это даст вам возможность наблюдать, что каждый раз испускает getFeaturedThreads. Однако, если имена пользователей изменяются, они не будут повторно излучаться. Если это важно, замените forkJoin на combineLatest и удалите оператора first из собранных наблюдаемых элементов.

Answer 2

Чтобы решить проблемы с подключением к пользователям, я написал службу, которая кэширует уже загруженных пользователей и отображает их в реферирующие данные с минимальным кодом.Он использует вложенную структуру карты, чтобы сделать присоединиться:

constructor(public db: AngularFireDatabase, public users:UserProvider) { 
    this.threads = db.list('threads').valueChanges().map(messages => { 
     return threads.map((t:Message) => { 
     t.user = users.load(t.userid); 
     return m; 
     }); 
    }); 
} 

И сервис UserProvider выглядит так:

@Injectable() 
export class UserProvider { 
    db: AngularFireDatabase; 
    users: Map<String, Observable<User>>; 

    constructor(db: AngularFireDatabase) { 
    this.db = db; 
    this.users = new Map(); 
    } 

    load(userid:string) : Observable<User> { 
    if(!this.users.has(userid)) { 
     this.users.set(userid, this.db.object(`members/${userid}`).valueChanges()); 
    } 
    return this.users.get(userid); 
    } 
} 

Там же полный рабочий пример стыков и все шаблонные here