Angular: como iterar sobre Immutable js Map dentro do template?

Question

Quero usar Immutable.js dentro do meu aplicativo angular porque ouvi que ele melhora o desempenho.

Então, eu quero converter meu código para usar o pacote Immutable.js.

Portanto, meu componente tem um mapa de texto digitado regular, que é usado dentro do modelo do componente. Ele iterou com * ngFor com canal keyValue.

Quando eu substituir esse mapa por Immutable.Map, a itertação não funcionará !!

Portanto, a questão, como iterar sobre Immutable.Map dentro do template?

Obrigado à frente

Atualização: Para reproduzir o problema.

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

Em app.component.html:

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

Quando myMap era um mapa de texto digitado simples, funcionava. O código acima é depois de refatorar para Immutable.js Map. E agora o ngFor não produzirá o mesmo resultado de antes ....

BTW, o resultado do código acima é: __altered: false __hash: __ownerID: _root: [objeto Object] size: 3

Answer 1

Como as coleções imutáveis ​​já são iteráveis, você pode simplesmente remover o pipe de valor-chave. ngFor pode tratar o mapa immutable.js exatamente como um mapa javascript nativo.

As entradas do iterador do Map são matrizes em 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