每個可觀察火力點的離子

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()可能是你正在尋找