Angular: 如何遍历模板内的Immutable js Map？

Question

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

所以我想将我的代码转换为使用 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 Map 之后的代码。现在 ngFor 不会产生与以前相同的结果....

顺便说一句，上面代码的结果是： __altered：错误 __hash : __ownerID: _root : [对象对象] 尺寸：3

Answer 1

由于不可变集合已经是可迭代的，~~您只需删除键值管道即可。~~ ngFor 可以像对待原生 javascript 地图一样对待 immutable.js 地图。

地图 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

Angular: 如何遍历模板内的Immutable js Map？

Angular: how to iterate over Immutable js Map inside the template?

typescript

immutable.js

angular