Angular: как перебирать Immutable js Map внутри шаблона?

Question

Я хочу использовать Immutable.js в своем приложении angular, потому что слышал, что он улучшает производительность.

Итак, я хочу преобразовать свой код для использования пакета Immutable.js.

Итак, у моего компонента есть обычная карта машинописного текста, которая используется внутри шаблона компонента. Он повторяется с * ngFor с каналом keyValue.

Когда я заменяю эту карту на Immutable.Map, она не работает !!

Итак, вопрос, как перебрать Immutable.Map внутри шаблона?

Заранее спасибо

Обновление: воспроизвести проблему.

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

В app.component.html:

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

Когда myMap была простой машинописной картой, она работала. Приведенный выше код создан после рефакторинга карты Immutable.js. И теперь ngFor не будет давать того же результата, что и раньше ....

Кстати, результат приведенного выше кода: __altered: false __hash: __ownerID: _root: [object Object] size: 3

Answer 1

Поскольку неизменяемые коллекции уже являются итерируемыми, вы можете просто удалить канал ключевого значения. ngFor может обрабатывать immutable.js Map точно так же, как родную карту javascript.

Записи итератора Map представляют собой массивы в формате[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