类型“AngularFireList<{}>”上不存在属性“地图”答案

【问题标题】：Property 'map' does not exist on type 'AngularFireList<{}>'类型“AngularFireList<{}>”上不存在属性“地图”
【发布时间】：2018-05-05 23:30:45
【问题描述】：

我很难弄清楚这一点。运行 Ionic Serve 时出现以下错误：

“AngularFireList”类型上不存在属性“map”。

我已经搜索了一段时间的修复程序，但找不到任何有效的方法，所以我在这里。当前版本是：

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.9
Angular Core: 5.0.1
Angular Compiler CLI: 5.0.1
Node: 9.11.1

我已经解决了所有其他错误并将所有内容迁移到新版本（将 Firebase 列表更改为 Angular。）

抛出错误的代码是.map()对象，这里：

afDB.list('/feed').map((feeds) =>

这是我的代码：

import { Component  } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController , 
LoadingController} from 'ionic-angular';
import { AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import 'rxjs/add/operator/map'; // you might need to import this, or not 
depends on your setup

@IonicPage()
@Component({
  selector: 'page-feed',
  templateUrl: 'feed.html'
})

export class FeedPage {

  feeds: AngularFireList<any[]>;
  feedView: string = "activity";

  constructor(public navCtrl: NavController, public navParams: NavParams ,public modalCtrl: ModalController,public loadingCtrl: LoadingController, public     afDB: AngularFireDatabase) {

    let loadingPopup = this.loadingCtrl.create({
      spinner: 'crescent',
      content: ''
    });
    loadingPopup.present();
    this.feeds = <AngularFireList<any[]>> afDB.list('/feed').map((feeds) => {
          return feeds.map((feeds) => {
              feeds.images = afDB.list('/feed/'+feeds.$key+'/images')
              loadingPopup.dismiss().catch(() => console.log('ERROR CATCH: LoadingController dismiss'));
              return feeds                      
          })
      }) 
  }
}

我正在学习，所以如果答案很明显，请解释一下。提前致谢。

【问题讨论】：

标签： javascript angular firebase ionic-framework firebase-realtime-database

【解决方案1】：

当你在 AngularFireDatabase 上调用 list 方法时，你会得到一个 AngularFireList。即使名称中有 List，它也不是具有 map 方法的数组或流。

这是该类型的定义（您可以在编辑器中使用 AngularFireList 上的 go to definition 或浏览code source 来查看）：

export interface AngularFireList<T> {
  query: DatabaseQuery;
  valueChanges(events?: ChildEvent[]): Observable<T[]>;
  snapshotChanges(events?: ChildEvent[]): Observable<SnapshotAction[]>;
  stateChanges(events?: ChildEvent[]): Observable<SnapshotAction>;
  auditTrail(events?: ChildEvent[]): Observable<SnapshotAction[]>;
  update(item: FirebaseOperation, data: T): Promise<void>;
  set(item: FirebaseOperation, data: T): Promise<void>;
  push(data: T): ThenableReference;
  remove(item?: FirebaseOperation): Promise<void>;
}

为了获取流，您需要使用返回 Observable 的方法之一，并假设您需要 valueChanges 值。所以你的代码应该是这样的：

afDB.list('/feed').valueChanges.map(...)

结果将是一个流，意思是Observable<any>。这意味着在模板中您需要使用Async pipe。

【讨论】：

好的，我跟着你。一旦我更新代码以反映 AngularFireList 而不是对象，并添加了值更改挂钩，我收到此错误：>Property 'map' does not exist on type '(events?: ChildEvent[]) => Observable'。我假设这是您正在谈论的异步管道组件？您能否提供一些关于我将如何实施的见解？
一切都好 - 我设法解决了问题。不过感谢您的快速回答！

【解决方案2】：

我们似乎已经通过以下操作解决了这个问题 - 我的意思是，我的意思是所有功劳都归功于我的朋友 R。杰克逊。

首先，我将它添加到导入中

从 'rxjs/Observable' 导入 {Observable}

接下来，在导出部分下，我的行：

提要：AngularFireList；至提要：可观察；

然后，将这些更改付诸实施

this.feeds = afDB.list('/feed').valueChanges().map((feeds:any)

这不再引发任何错误，并且服务没有任何问题。

【讨论】：