Angular: come iterare su Immutable js Map all'interno del template?

Question

Voglio usare Immutable.js all'interno della mia applicazione angolare perché ho sentito che migliora le prestazioni.

Quindi voglio convertire il mio codice per utilizzare il pacchetto Immutable.js.

Quindi, il mio componente ha una mappa dattiloscritta regolare, che viene utilizzata all'interno del modello del componente. È iterato con * ngFor con keyValue pipe.

Quando sostituisco quella mappa con Immutable.Map, l'iterazione non funzionerà !!

Quindi la domanda, come iterare su Immutable.Map all'interno del modello?

Grazie in anticipo

Aggiornamento: per riprodurre il problema.

In 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});
}

In app.component.html:

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

Quando myMap era una semplice mappa dattiloscritta, funzionava. Il codice sopra è dopo il refactoring di Immutable.js Map. E ora ngFor non produrrà lo stesso risultato di prima ...

A proposito, il risultato del codice precedente è: __altered: false __hash: __ownerID: _root: [object Object] size: 3

Answer 1

Poiché le raccolte immutabili sono già iterabili, puoi semplicemente rimuovere la pipe del valore chiave. ngFor può trattare immutable.js Map esattamente come una mappa javascript nativa.

Le voci di Map iteratore sono gli array in 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