RXJS 6.5.1 和 Angular 8 中的 Map 函数与 Firestore 集合

Question

我正在使用 AngularFire 与 RxJS 5.4.0 和 Firebase。下面的代码工作正常：

 this.questions$ = dbQuestions$.map(snapshots =>
    snapshots.map(data =>
    this.FilterControls(data)
  ));

当我将下面的代码与 RXJS 6.5.1、Angular 8 和 Firestore（如下所示）一起使用时，我收到错误：

Property 'map' does not exist on type 'AngularFirestoreCollection<{}>'

 this.questions$ = dbQuestions$.map(snapshots => {
   snapshots.map(data => this.FilterControls(data))
 });

Answer 1

错误“map 在类型 AngularFirestoreCollection<{}> 上不存在”是由于 RXJS 版本 5.5 中所做的重大更改。

Pipeable Operators

Starting in version 5.5 we have shipped "pipeable operators", which can be accessed in rxjs/operators... These are meant to be a better approach for pulling in just the operators you need than the "patch" operators found in rxjs/add/operator/*.

使用新的管道运算符，您的代码将如下所示：

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dbQuestionCollection: AngularFirestoreCollection<{}>;
  dbQuestions$: Observable<{}[]>;

  constructor(private afs: AngularFirestore) {
    this.dbQuestionCollection = this.afs.collection<{}>('questions');
    this.dbQuestions$ = this.dbQuestions$ = this.dbQuestionCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data(); // DB Questions
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    )
  }
}