Javascript 为什么该管道可以处理本地模拟数据，但不能处理来自Firebase的传入数据？

有人给了我这个东西来完成我需要做的事情。

我使用它，并在我自己的模拟数据上使用它，看起来像这样

links = [ {
      link  : 'I need to expand my current brand.',
      val   : 'expand'
  }, {
      link  : 'I need to re-create my Brand.',
      val   : 'recreate'
  }, {
      link  : 'I need to build a Brand for my new Business.',
      val   : 'new-business'
  }, {
      link  : 'I need to build a Brand for my new product.',
      val   : 'new-product'
  }, {
      link  : 'I have a technical difficulty that requires an Artist.',
      val   : 'tech-difficulty'
  } ]

"home_intro_links" : {
    "link01" : {
        "link"  : "I need to expand my current brand.",
        "val"   : "expand"
    },
    "link02" : {
        "link"  : "I need to re-create my brand.",
        "val"   : "recreate"
    },
    "link03" : {
        "link"  : "I need to build a brand for my new Business.",
        "val"   : "new-business"
    },
    "link04" : {
        "link"  : "I need to build a brand for my new product.",
        "val"   : "new-product"
    },
    "link05" : {
        "link"  : "I have a technical difficulty that requires an Artist.",
        "val"   : "tech-difficulty"
    }
}

工作起来很有魅力。但是，当我连接包含Firebase数据的变量时，如下所示

links = [ {
      link  : 'I need to expand my current brand.',
      val   : 'expand'
  }, {
      link  : 'I need to re-create my Brand.',
      val   : 'recreate'
  }, {
      link  : 'I need to build a Brand for my new Business.',
      val   : 'new-business'
  }, {
      link  : 'I need to build a Brand for my new product.',
      val   : 'new-product'
  }, {
      link  : 'I have a technical difficulty that requires an Artist.',
      val   : 'tech-difficulty'
  } ]

"home_intro_links" : {
    "link01" : {
        "link"  : "I need to expand my current brand.",
        "val"   : "expand"
    },
    "link02" : {
        "link"  : "I need to re-create my brand.",
        "val"   : "recreate"
    },
    "link03" : {
        "link"  : "I need to build a brand for my new Business.",
        "val"   : "new-business"
    },
    "link04" : {
        "link"  : "I need to build a brand for my new product.",
        "val"   : "new-product"
    },
    "link05" : {
        "link"  : "I have a technical difficulty that requires an Artist.",
        "val"   : "tech-difficulty"
    }
}

不管我怎么做，它都是完全不起作用的

下面是我调用数据的方式

//服务文件

import { Injectable }           from '@angular/core';
import { AngularFire,
    FirebaseListObservable,
    FirebaseObjectObservable }  from 'angularfire2';
import { Observable }           from 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Injectable
export class HomeService {
    HomeIntroLinks: FirebaseListObservable<any>;

    constructor(private af: AngularFire) {}

    getHomeIntroLinks(){
        this.HomeIntroLinks = this.af.database.list('/home_intro_links') as FirebaseListObservable<any>
            return this.HomeIntroLinks;
    }
}

现在我回到

[object object]

问题上来。这是控制台的屏幕截图

您可以使用带有可观察的管道

<div *ngFor="let links of homeIntroLinks | async" class="row home_link_container justify-content-center">
  ...
</div>

...

查看结果的简化视图：

  <div *ngFor="let links of HomeIntroLinks | async" class="row home_link_container justify-content-center">
    {{links.link}}
  </div>

{{links.link}

在服务中尝试以下操作：

 getHomeIntroLinks(){
    this.HomeIntroLinks = this.af.database.list('/home_intro_links') 
        return this.HomeIntroLinks;
 }

在组件中：

homeIntroLinks; // remove the typing to firebaseobservable (for now)

ngOnInit() {
    this.homeIntroLinks = this._homeService.getHomeIntroLinks()
}

在这里，您可能需要在模板中添加异步管道：

*ngFor="let links of homeIntroLinks | async" 

---

否则，如果恰好是从firebase返回的对象，请映射键并创建数组：

ngOnInit() {
    firebaseObj = this._homeService.getHomeIntroLinks()
    this.homeIntroLinks = Object.keys(firebaseObj).map(x => firebaseObj[x])  
}

---

然后，对于在数据到达之前加载视图而没有抛出错误的应用程序，明智的做法是将

div

中的所有内容包装为：

您的firebase应该以这种格式发送数据

 [{
  "link01": {
    "link": "I need to expand my current brand.",
    "val": "expand"
  },
  "link02": {
    "link": "I need to re-create my brand.",
    "val": "recreate"
  },
  "link03": {
    "link": "I need to build a brand for my new Business.",
    "val": "new-business"
  },
  "link04": {
    "link": "I need to build a brand for my new product.",
    "val": "new-product"
  },
  "link05": {
    "link": "I have a technical difficulty that requires an Artist.",
    "val": "tech-difficulty"
  }
}]

您可以使用map操作符将返回的数据转换为服务中的json格式

 getTasks(): Observable<any[]> {
        return this._http.get(this._url)
            .map((response: Response) => <any[]>response.json())
            .do(data => console.log("data we got is " + JSON.stringify(data)))
            .catch(this.handleError);

getTasks（）：Observable
我尝试了这两种方法，但发现一个错误，即在这两种方法上都找不到指向服务文件的名称
Response
。这是在我将
添加到
FirebaseListObservable
之后，它说如果没有类型就无法使用。我试着从我的
中删除
，看看它是否有区别，控制台只是逐一检查，给出了
错误/提醒。正如Aravind指出的静态数据和fb数据之间的区别，因此，我更新了我的答案，将对象转换为数组检查我更新的答案：）它仍然告诉我
在服务文件中找不到名称响应
它可以工作，但您的html与返回的对象不匹配。links.link是一个字符串，不可编辑。我将编辑答案并在中输出一个简化的标记，以便您可以看到Firebase查询的结果。感谢更新，错误表明它尝试迭代的不是数组，而是对象。您可以只通过控制台登录映射，这样我们就可以确定传入数据的外观
.map（（res:Response）=>{console.log（'res'，res）；}）
并在您的问题中发布响应。作为评论，在我的回答中，我们确实尝试将传入的数据映射到数组，但似乎不起作用。因此，打印传入的数据，以便更容易找到解决方案。谢谢：）我发布的控制台的最后一张图片是执行
.map
的结果，没有数据。
 getTasks(): Observable<any[]> {
        return this._http.get(this._url)
            .map((response: Response) => <any[]>response.json())
            .do(data => console.log("data we got is " + JSON.stringify(data)))
            .catch(this.handleError);