Question

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

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

因此，我的组件具有一个常规的打字稿映射，该映射在组件的模板内部使用。通过keyValue管道使用* ngFor进行了迭代。

当我将该地图替换为Immutable.Map时，迭代将无法正常工作！

那么问题是，如何遍历模板内的Immutable.Map？

谢谢前进

更新：重现问题。

在app.component.ts中：

[System.Drawing]

在app.component.html中：

[System.Windows.Forms]

当myMap是一个简单的打字稿地图时，它可以工作。上面的代码在重构为Immutable.js Map之后。现在ngFor不会产生与以前相同的结果。...

顺便说一句，以上代码的结果是： __altered：错误 __哈希： __ownerID： _root：[对象对象] 大小：3

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

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

Angular：如何遍历模板内的不可变js Map？

1 个答案: