angular - number - ngfor object

Cómo iterar usando ngFor loop Map que contiene clave como cadena y valores como iteración de mapa

Question

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>

Answer 1

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í.

Answer 2

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'']]);
}

Answer 3

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

Demo de Stackblitz

Answer 4

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>

DEMO DE TRABAJO

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>

DEMO DE TRABAJO