Angular: jak iterować po Immutable js Map wewnątrz szablonu?

Question

Chcę używać Immutable.js w mojej aplikacji kątowej, ponieważ słyszałem, że poprawia wydajność.

Więc chcę przekonwertować mój kod, aby użyć pakietu Immutable.js.

Tak więc mój komponent ma zwykłą mapę maszynopisu, która jest używana w szablonie komponentu. Został iterowany z * ngFor z potokiem keyValue.

Kiedy zamieniam tę mapę na Immutable.Map, itertacja nie zadziała !!

Więc pytanie, jak iterować po Immutable.Map wewnątrz szablonu?

Z góry dziękuję

Aktualizacja: aby odtworzyć problem.

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

W app.component.html:

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

Kiedy myMap była prostą mapą maszynową, działała. Powyższy kod jest po refaktoryzacji do mapy Immutable.js. A teraz ngFor nie przyniesie takich samych rezultatów jak wcześniej ...

BTW, wynik powyższego kodu to: __altered: false __hash: __ownerID: _root: [object Object] size: 3

Answer 1

Ponieważ niezmienne kolekcje są już iterowalne, możesz po prostu usunąć potok keyvalue. ngFor może traktować mapę immutable.js dokładnie tak, jak natywną mapę javascript.

Wpisy iteratora Map to tablice w formacie[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