首页 文章

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

提问于
浏览 次
1

如何遍历每个对象？

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

我哪里做错了？

非常感谢

平list.ts

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

          });
     }

*注意：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);
                }
           );
      });
 }

平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

3 回答

  • 1

    您的帖子不太清楚，但据我所知 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 的更多信息以及这有何帮助 .

    回复于
  • 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]);
                }
           }

      });
 }
    回复于
  • 0

    Lodash的功能_.forIn()可能就是您要搜索的内容

    回复于

相关问题