每个可观察的火力基地的离子答案

【问题标题】：Ionic for each observable firebase每个可观察的火力基地的离子
【发布时间】：2017-11-20 04:50:17
【问题描述】：

如何循环遍历每个对象？

我试图监听 firebase 的变化，到目前为止，它设法检测到是否有来自 firebase 的推送，问题在于查看 HTML。

我哪里做错了？

非常感谢

ping-list.ts

    pingList() {
          this.ping.getPingList()
          .subscribe((data) => {
               this.ping_list = data;
               console.log(this.ping_list);

          });
     }

*note: console.log(this.ping_list) 我可以看到控制台打印的对象，如果数据有变化（从firebase控制台手动更改）它会再次打印，所以我猜可观察到的是工作。

ping.ts（提供者）

getPingList():Observable<any> {
      return new Observable(observer => {
           firebase.database().ref('pings/_list')
           .orderByValue().limitToLast(10)
           .on('value',
                (snapshot) => {
                     observer.next(snapshot.val());
                },
                (err) => {
                     console.log(err);
                }
           );
      });
 }

ping-list.html

     <button ion-item *ngFor="let a_ping of ping_list">
           {{ a_ping.title }}
      </button>

firebase 数据如下所示：

"pings" : {
 "_list" : {
  "-KmjxLuZWIE72D_syD73" : {
    "date_updated" : 1497600717098,
    "desc" : "ping server 1",
    "title" : "ping 1"
  },
  "-Kmk0x-3OI0FP-TYxC3W" : {
    "date_updated" : 1497601921866,
    "desc" : "ping server 2",
    "title" : "ping 2"
  }
},

给我这个错误

Error trying to diff '[object Object]'. Only arrays and iterables are allowed

我猜 ping_list 上的角度不能循环？或者无论如何将对象转换为数组？我确实尝试过 console.log(this.ping_list.length) 它的未定义

【问题讨论】：

标签： angular typescript firebase ionic-framework observable

【解决方案1】：

啊，我是这样弄的，

 pingList() {
      console.log('ionViewDidLoad PingListPage');
      this.ping.getPingList()
      .subscribe((data) => {
           this.ping_list = [];
           for (var key in data) {
                if (data.hasOwnProperty(key)) {
                     console.log(key + " -> " + data[key]);
                     this.ping_list.push(data[key]);
                }
           }

      });
 }

【讨论】：

【解决方案2】：

Lodash 的函数_.forIn() 可能就是你要找的东西

【讨论】：

【解决方案3】：

您的帖子不太清楚，但据我了解console.log(this.ping_list); 正确打印您已收到推送通知但模板未更新。

您可以通过将模板显式放入 Angular 的区域来强制执行模板更新。

import { NgZone } from '@angular/core';

@Component({
  ...
})
export class YourPage {

  constructor(private zone:NgZone, ...) {
    ...
  }

  pingList() {
        this.ping.getPingList()
        .subscribe((data) => {
             this.zone.run(() => {
               this.ping_list = data;
               console.log(this.ping_list);
             }
        });
  }

您可以在this blog 中了解有关ngZone 的更多信息以及它如何提供帮助。

【讨论】：

抱歉让您感到困惑，我编辑了我的问题。请再次检查，谢谢。