Esta publicación trata sobre un problema interesante que encontré en el trabajo.
Si aún no lo sabes. Estoy hablando de Angular 2+
El problema
Entonces, desea mostrar el marcado de una lista, los valores de esta lista provienen del back-end y, por alguna razón, en lugar de una buena matriz de objetos, recibe algo como esto.
{ "car" : { "color" : "red", "model" : "2013" }, "motorcycle": { "color" : "red", "model" : "2016" }, "bicycle": { "color" : "red", "model" : "2011" } }Luego intenta usar * ngFor pero aparece un mensaje de error salvaje:
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.Puede arreglarlo en la parte trasera para obtener una variedad de objetos, pero nadie tiene tiempo para eso. No te preocupes niño, nos tengo.
En Angular 6.1, se introdujo KeyValuePipe, que le permite iterar las propiedades de los objetos:
<div *ngFor="let item of object | keyvalue"> {{item.key}}:{{item.value}} </div>Documentos: https://angular.io/api/common/KeyValuePipe
No sé si esto es seguro, pero para estos casos simples no me gusta la solución de tubería, por lo que generalmente uso:
<div *ngFor="let k of objectKeys(yourObject)"> {{yourObject[k].color}} </div>y en el controlador:
objectKeys(obj) { return Object.keys(obj); }Este es un caso bastante frecuente, no entiendo por qué no hay una implementación estándar para esto como en Angular.js 1.x
Una mejor solución sería usar una tubería como esta:
import { Pipe, PipeTransform } from '@angular/core'; /** * Convert Object to array of keys. */ @Pipe({ name: 'appProperties' }) export class PropertiesPipe implements PipeTransform { transform(value: {}): string[] { if (!value) { return []; } return Object.keys(value); } }Luego en tu plantilla:
<div *ngFor="let property of response | appProperties"> <div *ngFor="let item of response[property]"> {{item.something}} </div> </div>