Angular：如何在模板内迭代不可变 js Map？

Question

我想在我的 Angular 应用程序中使用 Immutable.js，因为我听说它可以提高性能。

所以我想将我的代码转换为使用 Immutable.js 包。

所以，我的组件有一个常规的打字稿地图，它在组件的模板中使用。 它使用带有 keyValue 管道的 *ngFor 进行迭代。

当我将该映射替换为 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 是一个简单的 typescript Map 时，它可以工作。 上面的代码是重构为 Immutable.js Map 之后的代码。 现在 ngFor 不会产生与以前相同的结果....

顺便说一句，上面代码的结果是： __改变：假 __哈希： __ownerID: _root : [对象对象] 尺寸：3

Answer 1

由于不可变集合已经是可迭代的，您可以删除键值管道。ngFor 可以将 immutable.js Map 完全视为原生 javascript Map。

Map 的iterator 的条目是数组，格式为[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