"Łączenie" zapytań Firebase w Angularfire2 - kątowe, maszynopis, baza firebase, baza danych Firebase, angularfire2

Problemy, które napotkałem z pustymipola wartości miały do ​​czynienia z nieistniejącymi kluczami w mojej bazie danych, więc większość dyskursu tutaj nie odnosi się do twojego pytania. Jeśli szukasz sposobu na "dołączenie" zapytań w AngularFire2, zaakceptowana odpowiedź poniżej świetna robota. Obecnie używam combineLatest zamiast forkJoin. Aby to zrobić, musisz import "rxjs/add/observable/combineLatest";.

Mam następującą zdenormalizowaną strukturę Firebase:

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

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

Chcę renderować username w moim threads widok, który jest sortowany według quality.

Moja usługa:

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

Mój komponent:

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

Z jakiegoś powodu rejestruje to, co wygląda na niespełnione obserwowalne na konsolę.

Chciałbym, aby te wartości stały się własnością threads więc mogę wyrazić to w moim przekonaniu w ten sposób:

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

Zaktualizowano: console.log dla allThreads i thisThread

Zaktualizowano: zasubskrybowano dla getUsername ()

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

Wynikiem tego są obiekty bez wartości:

Odpowiedzi:

4 dla odpowiedzi № 1

Możesz tworzyć obserwacje na podstawie getFeaturedThreads która wysyła zapytania do członków i zastępuje wartości w każdym wątku participants właściwość z nazwami użytkowników:

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

To da ci możliwą do zaobserwowania emisję za każdym razem getFeaturedThreads emituje. Jeśli jednak nazwy użytkowników ulegną zmianie, to nie będą ponownie emitować. Jeśli to jest ważne, wymień forkJoin z combineLatest i usuń first operator z obserwowanych elementów składowych.

---

0 dla odpowiedzi nr 2

Aby rozwiązać problemy z użytkownikami, napisałem usługę, która buforuje już pobranych użytkowników i odwzorowuje je na dane referencyjne przy minimalnym kodzie. Do zagnieżdżenia używa zagnieżdżonej struktury mapy:

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

A usługa UserProvider wygląda tak:

@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);
}
}

Istnieje pełny przykład pracy łączników i całego zestawu tutaj

---