Angular: Şablon içinde Immutable JS Map'i nasıl yineleyebilirim?

Question

Immutable.js'yi açısal uygulamamda kullanmak istiyorum çünkü performansı artırdığını duydum.

Bu yüzden kodumu Immutable.js paketini kullanacak şekilde dönüştürmek istiyorum.

Yani, benim bileşenim, bileşenin şablonunun içinde kullanılan normal bir typcript Map'e sahip. KeyValue borusu ile * ngFor ile yinelendi.

Bu haritayı Immutable.Map olarak değiştirdiğimde, yineleme çalışmayacak!

Öyleyse soru, şablon içinde Immutable.Map üzerinde nasıl yinelenir?

Şimdiden teşekkürler

Güncelleme: Sorunu yeniden oluşturmak için.

App.component.ts'de:

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'de:

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

MyMap basit bir typcript Map olduğunda, işe yaradı. Yukarıdaki kod, Immutable.js Haritasına yeniden düzenlemeden sonra. Ve şimdi ngFor, eskisi gibi aynı sonucu vermeyecek ...

BTW, yukarıdaki kodun sonucu: __altered: false __hash: __ownerID: _root: [nesne Nesne] boyut: 3

Answer 1

Değişmez koleksiyonlar zaten yinelenebilir olduğundan, anahtar değer borusunu kaldırmanız yeterlidir. ngFor, immutable.js Haritasını tam olarak yerel bir javascript Haritası gibi ele alabilir.

Haritalar'ın ait Girişler yineleyici olan diziler biçiminde[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