Estoy un poco confundido acerca de cómo obtener la key y el value de un objeto en angular2 mientras uso *ngFor para iterar sobre el objeto. Sé que en angular 1.x hay una sintaxis como
ng-repeat="(key, value) in demo"pero no sé cómo hacer lo mismo en angular2. He intentado algo similar, sin éxito:
<ul> <li *ngFor='#key of demo'>{{key}}</li> </ul> demo = { 'key1': [{'key11':'value11'}, {'key12':'value12'}], 'key2': [{'key21':'value21'}, {'key22':'value22'}], }Aquí hay un plnkr con mi intento: http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview
¿Cómo puedo obtener key1 y key2 dinámicamente usando *ngFor ? Después de buscar mucho, encontré la idea de usar tuberías, pero no sé cómo hacerlo. ¿Hay alguna tubería incorporada para hacer lo mismo en angular2?
Al igual que en la última versión de Angular (v6.1.0) , Angular Team ha agregado una nueva tubería integrada para el mismo nombre que la tubería de keyvalue para ayudarlo a iterar a través de objetos, mapas y matrices, en el módulo common del paquete angular. Por ejemplo -
<div *ngFor="let item of testObject | keyvalue"> Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b> </div> Para mantener el orden original, use keyvalue:onCompare ,
y en el componente definir devolución de llamada:
// ... import {KeyValue} from '@angular/common'; @Component(/* ... */) export class MyComponent { private onCompare(_left: KeyValue<any, any>, _right: KeyValue<any, any>): number { return -1; } }échale un vistazo aquí para obtener más información útil -
Si está utilizando Angular v5 o inferior o desea lograr el uso de tuberías, siga esta respuesta
Tenga acceso a Object.keys en la plantilla y utilícelo en *ngFor .
@Component({ selector: 'app-myview', template: `<div *ngFor="let key of objectKeys(items)">{{key + ' : ' + items[key]}}</div>` }) export class MyComponent { objectKeys = Object.keys; items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' }; constructor(){} }Puede crear una canalización personalizada para devolver la lista de claves para cada elemento. Algo como eso:
import { PipeTransform, Pipe } from '@angular/core'; @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value, args:string[]) : any { let keys = []; for (let key in value) { keys.push(key); } return keys; } }y usarlo así:
<tr *ngFor="let c of content"> <td *ngFor="let key of c | keys">{{key}}: {{c[key]}}</td> </tr>Editar
También puede devolver una entrada que contenga tanto la clave como el valor:
@Pipe({name: 'keys'}) 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; } }y usarlo así:
<span *ngFor="let entry of content | keys"> Key: {{entry.key}}, value: {{entry.value}} </span>