Используйте RXJS и AsyncPipe вместо Observable.subscribe - PullRequest
Новая
       5

Используйте RXJS и AsyncPipe вместо Observable.subscribe

0 голосов
/ 15 января 2019

В моем приложении firebase (angularfire2) я хочу вернуть документ для каждого элемента коллекции. Для этого я использую Observables + .subscribe (). Но я хочу получить альтернативу, используя RXJS и AsyncPipe.

Я пытался использовать следующие цепочки RXJS: 

this.shortlisted$ = this.db.collection(`interestingStartups`).valueChanges().pipe(mergeMap(actions => actions.map(el => {
 return this.db.doc(`startups/${(<any>el).startupUid}`).valueChanges().pipe(mergeMap(el => of([el])));
})));

И используйте *ngFor="let s of shortlisted$ | async" внутри шаблона HTML. Но это не работает. Angular показывает следующую ошибку: «Не удается найти другой поддерживающий объект« [объект]] типа «объект». NgFor поддерживает только привязку к итерируемым объектам, таким как массивы »*

Мой текущий код (Observables + .subscribe), который работает: 

this.db.collection('interestingStartups').valueChanges().subscribe((el:any) => {
 el.forEach(is => {
  this.db.doc('startups/' + is.startupUid).get().subscribe(s => {
   this.shortlisted.push(s.data());
  })
 })        
});

И я просто использую чистый *ngFor без AsyncPipe, т.е. *ngFor="let s of shortlisted"

Я хочу присвоить результат в this.shortlisted, используя операторы RXJS, такие как mergeMap или аналогичные. В настоящий момент мне не удалось найти рабочее решение для этого

Пожалуйста, помогите!

1 Ответ

0 голосов
/ 15 января 2019

Это должно сработать. 

this.shortlisted$ = this.db.collection('interestingStartups').valueChanges().pipe(
  switchMap(el => combineLatest(
    el.map(is => this.db.doc('startups/' + is.startupUid).get())
  ))
);

Он начинается с получения списка интересных запусков, затем для каждого запуска он получает документ для запуска и использует combineLatest для их объединения.

...