Angular: comment itérer sur Immutable js Map dans le modèle?

Question

Je souhaite utiliser Immutable.js dans mon application angulaire car je l'ai entendu améliorer les performances.

Je veux donc convertir mon code pour utiliser le package Immutable.js.

Donc, mon composant a une carte dactylographiée régulière, qui est utilisée dans le modèle du composant. Il a itéré avec * ngFor avec le tube keyValue.

Lorsque je remplace cette carte par Immutable.Map, l'itération ne fonctionnera pas !!

Donc, la question, comment parcourir Immutable.Map à l'intérieur du modèle?

Merci d'avance

Mise à jour: pour reproduire le problème.

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

Dans app.component.html:

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

Lorsque myMap était une simple carte dactylographiée, cela fonctionnait. Le code ci-dessus est après refactor en Immutable.js Map. Et maintenant, le ngFor ne produira plus le même résultat qu'avant ...

BTW, le résultat du code ci-dessus est: __altered: false __hash: __ownerID: _root: [objet objet] taille: 3

Answer 1

Étant donné que les collections immuables sont déjà itérables, vous pouvez simplement supprimer le tube keyvalue. ngFor peut traiter immutable.js Map exactement comme une Map native javascript.

Les entrées de l' itérateur de Map sont des tableaux au format[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