首页 文章

Ionic和AngularFireDatabase列表结果 - 类型'{}'上不存在属性'map'

提问于
浏览 次
0

我试图通过 list 函数从Firebase获取数据并以Json格式使用它（在我的Google Map 上加载标记） . 但是我遇到了返回 snapshots 的问题：'{}'类型的属性'map'不存在

我的进口：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

带有错误的代码片段：

markers: Observable<any[]>;
constructor(public navCtrl: NavController, 
      public geolocation: Geolocation, 
      public db: AngularFireDatabase) { 

        this.markers = this.db.list("empresa/", {preserveSnapshot: true})
          .map(snapshots => {
            return snapshots.map(snapshot => { // this second .map displays the error
              return snapshot.val();    
            })
            .subscribe((marcas)=> {
              console.log(marcas);
            });
        });
      }

因此，我认为， subscribe 在控制台上不显示任何内容 . 我还尝试以不同的方式导入rxjs，如此链接Property 'map' does not exist on type 'Observable<Response>'，但没有成功 .

javascript angular ionic-framework observable angularfire2

1 回答

  • 0

    看起来像迁移问题 - since AF 5.0 list 返回 AngularFireList<T> 服务，而不是 FirebaseListObservable ，您必须在其上调用an action以将数据流式传输到可观察的集合中，例如：

    const subscription = this.db.list("empresa/").snapshotChanges()
      .map(snapshots => {
        return snapshots.map(snapshot => snapshot.payload.val());
      })
      .subscribe(values => {
        console.log(values);
        this.markers = values;
      });

    另请注意， subscribe 在外部 map 之后被链接，而不是在示例中的内部;和 this.markers 正在订阅中分配结果，因此您必须将其类型从 Observable<any[]> 更改为 any[] （或者它们是什么，只是不可观察） .

    有关详细信息，请参阅文档中的3. Retrieving data as lists;那里's an example at the end of the page on using the listed items inside an angular template with async pipe, where you don'需要 subscribe ，然后你将 this.markers 保留为 Observable<any[]> ，其余的将是：

    this.markers = this.db.list("empresa/").snapshotChanges()
  .map(snapshots => {
    return snapshots.map(snapshot => snapshot.payload.val());
  });

    这是首选，因为异步管道为您管理订阅（因为如果您手动订阅，您也应该unsubscribe） .

    回复于

相关问题