angular2 nested ngfor 巢狀迴圈的取值

近日用angular2及angularfire2從firebase取回有巢狀迴圈的資料，會發生第一層可以取回，但更裡面那一層無法取回的問題，主因是到第二層時，取回的是json的資料，但要再ngFor一次時，會發生取到的是json不是ngFor所允許的list結搆，所以就炸了

以下為firebase的資料結構：


最後是透過angular2的pipe解決：

	import {Pipe, PipeTransform} from '@angular/core';
	@Pipe({name: 'keyValues'})
	export class KeysPipe implements PipeTransform{
	transform(value, args:string[]) : any {
	let keys = [];
	for (let key in value) {
	keys.push({key: key, value: value[key]});
	}
	return keys;
	}
	}
	<ion-item *ngFor="let chat of record.chats | keyValues">
	<ion-avatar item-left>
	<img src="{{chat.value.uid}}">
	</ion-avatar>
	<h2>{{chat.value.message}}</h2>
	<p>{{chat.value.timestamp}}</p>
	</ion-item>

view raw nested_ngFor.html hosted with ❤ by GitHub