0
466
ViewsCómo iterar usando ngFor loop Mapa que contiene clave como cadena y valores como iteración de mapa
Soy nuevo en angular 5 y trato de iterar el mapa que contiene otro mapa en mecanografiado. Cómo iterar debajo de este tipo de mapa en angular a continuación es el código para el componente:
import { Component, OnInit} from '@angular/core'; @Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.css'] }) export class MapComponent implements OnInit { map = new Map<String, Map<String,String>>(); map1 = new Map<String, String>(); constructor() { } ngOnInit() { this.map1.set("sss","sss"); this.map1.set("aaa","sss"); this.map1.set("sass","sss"); this.map1.set("xxx","sss"); this.map1.set("ss","sss"); this.map1.forEach((value: string, key: string) => { console.log(key, value); }); this.map.set("yoyoy",this.map1); } }y su plantilla html es:
<ul> <li *ngFor="let recipient of map.keys()"> {{recipient}} </li> </ul> <div>{{map.size}}</div> 
3 answers
Answer question0
Para Angular 6.1+ , puede usar el valor keyvalue de tubería predeterminado ( Revise y vote a favor también ):
<ul> <li *ngFor="let recipient of map | keyvalue"> {{recipient.key}} --> {{recipient.value}} </li> </ul>Para la versión anterior:
Una solución simple para esto es convertir el mapa en una matriz: Array.from
Lado del componente:
map = new Map<String, String>(); constructor(){ this.map.set("sss","sss"); this.map.set("aaa","sss"); this.map.set("sass","sss"); this.map.set("xxx","sss"); this.map.set("ss","sss"); this.map.forEach((value: string, key: string) => { console.log(key, value); }); } getKeys(map){ return Array.from(map.keys()); }Lado de la plantilla:
<ul> <li *ngFor="let recipient of getKeys(map)"> {{recipient}} </li> </ul>0
Si está utilizando Angular 6.1 o posterior, la forma más conveniente es usar KeyValuePipe
@Component({ selector: 'keyvalue-pipe', template: `<span> <p>Object</p> <div *ngFor="let item of object | keyvalue"> {{item.key}}:{{item.value}} </div> <p>Map</p> <div *ngFor="let item of map | keyvalue"> {{item.key}}:{{item.value}} </div> </span>` }) export class KeyValuePipeComponent { object: Record<number, string> = {2: 'foo', 1: 'bar'}; map = new Map([[2, 'foo'], [1, 'bar']]); }0
Editar
Para angular 6.1 y más reciente, use KeyValuePipe como lo sugiere Londeren.
Para angular 6.0 y anteriores
Para facilitar las cosas, puede crear una tubería.
import {Pipe, PipeTransform} from '@angular/core'; @Pipe({name: 'getValues'}) export class GetValuesPipe implements PipeTransform { transform(map: Map<any, any>): any[] { let ret = []; map.forEach((val, key) => { ret.push({ key: key, val: val }); }); return ret; } } <li *ngFor="let recipient of map |getValues"> Como es puro, no se activará en cada detección de cambio, sino solo si la referencia a la variable del map cambia