时间戳

首页 > 解决方案 > Angular：如何在模板内迭代不可变 js Map？

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

问题描述

我想在我的 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 不会产生与以前相同的结果......

顺便说一句，上面代码的结果是： __altered : false __hash : __ownerID: _root : [object Object] size : 3

标签： angulartypescriptimmutable.js

解决方案

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

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

推荐阅读