Question

如何遍历每个对象？

我试图监听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）未定义的

Answer 1

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

您可以通过将模板更新明确指向角度区域来强制执行模板更新。

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及其有何帮助。

Answer 2

啊，我是这样得到的，

 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]);
                }
           }

      });
 }

Answer 3

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

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

3 个答案: