Angular: ¿como iterar sobre Immutable js Map dentro de la plantilla?

Question

Quiero usar Immutable.js dentro de mi aplicación angular porque escuché que mejora el rendimiento.

Así que quiero convertir mi código para usar el paquete Immutable.js.

Entonces, mi componente tiene un mapa mecanografiado regular, que se usa dentro de la plantilla del componente. Iteó con * ngFor con la tubería keyValue.

Cuando reemplace ese mapa a Immutable.Map, ¡la iteración no funcionará!

Entonces, la pregunta, ¿cómo iterar sobre Immutable.Map dentro de la plantilla?

Gracias por delante

Actualización: para reproducir el problema.

En app.component.ts:

import { Comoonent}  from '@angular/core';
import { Map as immuMap} from 'immutable' ;

@Component({
selector: 'app-map', 
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] 
}) 
export class AppComponent {
myMap = immuMap({ a: 1, b: 2, c:3});
}

En app.component.html:

<div *ngFor="let item of myMap |  keyvalue >
     <span>{{item.key}} :  {{item.value}}</span>
</div>

Cuando myMap era un mapa mecanografiado simple, funcionó. El código anterior es posterior a la refactorización en Immutable.js Map. Y ahora el ngFor no producirá el mismo resultado que antes ...

Por cierto, el resultado del código anterior es: __altered: false __hash: __ownerID: _root: [object Object] tamaño: 3

Answer 1

Dado que las colecciones inmutables ya son iterables, puede simplemente eliminar la canalización de keyvalue. ngFor puede tratar el mapa immutable.js exactamente como un mapa javascript nativo.

Las entradas del iterador de Map son matrices en formato[key, value]

const imMap = Immutable.Map({ a: 1, b: 2, c:3});
for(entry of imMap ) {
  console.log('entry', entry[0], 'is', entry[1]);
}

const nativeMap = new window.Map([['a',1], ['b',2], ['c':3]]);
for(entry of nativeMap ) {
  console.log('entry', entry[0], 'is', entry[1]);
}

// both loops will output:
// entry a is 1
// entry b is 2
// entry c is 3