每个可观察火力点的离子

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> 

的火力点的数据是这样的：

"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

啊啊啊我通过这种方式得到了它是什么，

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 2

您的帖子不太清楚，但据我所知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); 
      } 
     }); 
    } 

您可以了解更多关于ngZone，以及如何能够在this blog帮助。

Answer 3

Lodash的功能_.forIn()可能是你正在寻找