在 ionic 3 中使用 changes.map 从 firebase 获取数据时出错

Question

我正在尝试根据登录用户 ID 从 firebase 获取数据，但在使用 changes.map 时出现错误。 vscode 中的错误显示是“属性 'map' 在类型 'unknown' 上不存在”。

以下是我获取数据的方式：

-----------------shopping-list.ts:-----------------

userId: string;
private shoppingListRef: any;

  constructor(private db: AngularFireDatabase, private afAuth: AngularFireAuth){
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.userId = data.uid;
        this.shoppingListRef = this.db.list<Item>(`shopping-list/${data.uid}`);
      }
    })
  }

  getShoppingList(){
    return this.shoppingListRef;
  }

-------------home.ts:----------

shoppingList$: Observable<Item[]>;
  userId: string;
  profileData: Observable<Profile>;

  constructor(public navCtrl: NavController, private shopping: shoppingListService,
    public db: AngularFireDatabase, private toast: ToastService,
    private afAuth: AngularFireAuth, private account: userAccountService) {}

  ionViewWillLoad(){
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.profileData = this.db.object<Profile>(`profile/${data.uid}`).valueChanges();
        this.userId = data.uid;
        this.getItemList();
      }
      else{
        this.navCtrl.setRoot('LoginPage');
      }
    })
  }

  getItemList(){
    try{
      this.shoppingList$ = this.shopping
        .getShoppingList() //this reruns the DB list
        .snapshotChanges() //this gives the keys and value pairs
        .pipe(map(
          changes => {
            **return changes.map(c => ({//this changes.map is where the error is showing**
              key: c.payload.key,
              ...c.payload.val()
            }));
          }
        ));
    }
    catch(e){
      console.error(e);
    }
  }

----home.html----- 这就是我显示记录的方式

<ion-item-sliding *ngFor="let item of shoppingList$ | async; let i=index" (click)="toggleAccordion(i)" [ngClass]="{active: isAccordionShown(i)}" >

-----下面是我的 package.jason:--------

{
  "name": "shoppingList",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "4.20.0",
    "@ionic-native/network": "^4.20.0",
    "@ionic-native/splash-screen": "4.20.0",
    "@ionic-native/status-bar": "4.20.0",
    "@ionic/storage": "2.2.0",
    "angularfire2": "^5.4.2",
    "cordova-plugin-network-information": "2.0.2",
    "cordova-res": "^0.15.1",
    "firebase": "^7.15.0",
    "ionic-angular": "3.9.9",
    "ionicons": "3.0.0",
    "native-run": "^1.0.0",
    "promise-polyfill": "^8.1.3",
    "rxjs": "6.0.0",
    "rxjs-compat": "6.2.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "@ionic/lab": "3.1.7",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^4.0.0",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-whitelist": "1.3.3",
    "typescript": "^2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-network-information": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

此错误在我使用 npm i typscript@latest 将 typescript 升级到最新版本并更新到版本“^3.9.7”后开始。

-----我尝试过的事情------

• 降级打字稿
• 将 rxjs 和 rxjs-compat 升级到 6.5.5,6.3.0,6.2.0
• 创建了一个新项目
• 删除 node_modules、package-lock.jason 并安装 npm

我真的需要帮助，因为我已经为此工作了好几天没有解决方案。提前谢谢大家

Answer 1

我找到了解决问题的方法。 我将任何类型分配给 shoppingListRef 而不是 AngularFireList 类型

最初是：

private shoppingListRef: any;

更新为：

import { AngularFireDatabase, AngularFireList } from "angularfire2/database";

private shoppingListRef: AngularFireList<Item>;

以上修改解决了问题