angular - number - ngfor object
Cómo iterar usando ngFor loop Map que contiene clave como cadena y valores como iteración de mapa (4)
Esto se debe a que map.keys() devuelve un iterador. *ngFor puede trabajar con iteradores, pero se map.keys() en cada ciclo de detección de cambios, lo que generará una nueva referencia a la matriz, lo que generará el error que se ve. Por cierto, esto no siempre es un error como tradicionalmente se lo pensaría; incluso puede que no rompa ninguna de sus funciones, pero sugiere que tiene un modelo de datos que parece comportarse de una manera insana: cambiar más rápido de lo que el detector de cambios comprueba su valor.
Si no desea convertir el mapa a una matriz en su componente, puede usar la canalización sugerida en los comentarios. No hay otra solución, como parece.
PS Este error no se mostrará en el modo de producción, ya que es más como una advertencia muy estricta, en lugar de un error real, pero aún así, no es una buena idea dejarlo así.
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 está 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>
Si está utilizando Angular 6.1 o posterior, la forma más conveniente es utilizar keyvalue
@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'']]);
}
Editar
Para angular 6.1 y más reciente, use el keyvalue como lo sugiere Londeren.
Para angular 6.0 y mayores
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
Para Angular 6.1+ , puede usar el valor de keyvalue tubería predeterminado ( revise 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>