clave de acceso y valor del objeto usando *ngFor
Estoy un poco confundido acerca de cómo obtener el keyy valuede un objeto en angular2 mientras lo uso *ngForpara 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 probado 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 obtenerlo key1y key2usarlo dinámicamente *ngFor? Después de buscar mucho, encontré la idea de usar tuberías, pero no sé cómo hacerlo. ¿Hay algún tubo incorporado para hacer lo mismo en angular2?
Como en la última versión de Angular (v6.1.0) , Angular Team ha agregado una nueva tubería integrada para el mismo nombre que keyvaluetubería para ayudarlo a iterar a través de objetos, mapas y matrices, en el commonmódulo 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:onComparey
en el componente defina la 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;
}
}
Ejemplo bifurcado de trabajo
Compruébalo aquí para obtener más información útil.
- https://github.com/angular/angular/blob/master/CHANGELOG.md#features-3
- https://github.com/angular/angular/commit/2b49bf7
Si está utilizando Angular v5 o inferior o desea lograr el uso de pipe, siga esta respuesta
- clave de acceso y valor del objeto usando ngfor
Tenga Object.keysacceso a la plantilla y utilícela en formato *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 tubería 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 puedes 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>
