Question

下面的代码片段是我的ionic3 / angularfire2项目的一部分。它连接到Firestore数据库 - 并且应该返回文档的快照observable。

从我的网络研究中，我可以看到其他人使用了类似的语法 - 我无法找到解决方案

// (all other imports are fine)

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

在构造函数中，我注入了......

private db: AngularFirestore

以下代码有错误（我非常不满意）

// customerRef: AngularFirestoreDocument<Customer>;
this.customerRef = this.db.doc(`customers/${k}`);

// cust: Observable<Customer>;
this.cust = this.customerRef.snapshotChanges().map(actions => {
  return actions.map(action => {
    const data = action.payload.doc.data() as Customer;
    const id = action.payload.doc.id;
    console.log('>>>>', { id, ...data });
    return { id, ...data };
  });
});

我收到以下错误

Typescript Error
Property 'map' does not exist on type 'Action<DocumentSnapshot>'.

我有项目的其他部分可以检索一些文档集合的可观察性（.valueChanges） - 它们工作得很好。

请帮忙。（如果我错过了描述某些内容，我会道歉 - 如果有人指出它会做 - 会尝试专注于错误的代码）

Angular CLI: 1.5.5
Node: 6.12.0
OS: darwin x64
Angular: 5.0.3

    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/pro": "1.0.16",
    "@ionic/storage": "2.1.3",
    "angularfire2": "^5.0.0-rc.4",
    "firebase": "4.8.0",
    "ionic-angular": "3.9.2",
    "promise-polyfill": "^7.0.0",
    "rxjs": "5.5.2",

Answer 1

这里的问题是在处理文档或文档集合时，snapshotChanges（）的行为令人困惑。

您使用的代码适合收集文档，但是在处理文档时会稍有变化。

尝试一下。

// customerRef: AngularFirestoreDocument<Customer>;
this.customerRef = this.db.doc(`customers/${k}`);

// cust: Observable<Customer>;
this.cust = this.customerRef.snapshotChanges().map(action => {
  const data = action.payload.data() as Customer;
  const id = action.payload.id;
  return { id, ...data };
});

对于使用较新rxjs的Angular 6 +，

// customerRef: AngularFirestoreDocument<Customer>;
this.customerRef = this.db.doc(`customers/${k}`);

// cust: Observable<Customer>;
this.cust = this.customerRef.snapshotChanges().pipe(map(action => {
  const data = action.payload.data() as Customer;
  const id = action.payload.id;
  return { id, ...data };
}));

我该如何解决 - 'Action'类型中不存在属性'map'

1 个答案:

对于使用较新rxjs的Angular 6 +，