Iterar un objeto Json con ngFor
angular ionic2 (1)
Recibo de un servidor web la siguiente cadena JSON.
[
{"name":"Joe Lincoln","age":"42","grade":"9","active":"1"},
{"name":"Jack Smith","age":"38","grade":"8","active":"1"},
{"name":"Peter Smith","age":"42","grade":"9","active":"0"},
{"name":"Eva Lorens","age":"42","grade":"8","active":"1"},
]
Quiero publicar el JSON en HTML, intenté lo siguiente, pero los campos no se llenan, también recibo Sin excepción, por lo que es muy difícil para mí descubrir por qué no funciona.
TS
this.servletService.webserviceCall(''MemberUnit'', ''getMembers'', params).then((obs)=>{
obs.subscribe(
(data) => {
this.members = JSON.parse(data);
});
})
HTML
<ion-item *ngFor="let member of members">
<ion-avatar item-left>
<svg width="75px" height="75px" >
<text x="50%" y="50%" text-anchor="middle" stroke="#2980b9" stroke-width="2px" dy=".1em">{{member.grade }}</text>
</svg>
</ion-avatar>
<h2>{{member.name}}</h2>
<h3>{{member.age}}</h3>
</ion-item>
Puede obtener las claves de un objeto usando
Object.keys
(requiere polyfill en IE AFAIK)
import { Pipe, PipeTransform } from ''@angular/core'';
@Pipe({ name: ''keys'' })
export class KeysPipe implements PipeTransform {
transform(value): any {
if(!value) return null;
return Object.keys(value);
}
}
<div *ngFor="let key of member | keys">{{member[key]}}</div>
Para Angular 6, consulte Cómo iterar teclas de objeto usando * ngFor