在Angular的*ngFor中如何访问Immutable.js Map的键与值？

嘿，我明白你遇到的困扰了——用Angular的*ngFor遍历Immutable.js的Map时，没法直接拆分键和值，而且一开始用forEach还没注意到它其实能拿到键对吧？别担心，这里有几个实用的方法帮你搞定：

方法1：将Map转换为键值对数组（组件内处理） #

Immutable.js的Map提供了entries()方法，它会返回一个包含所有键值对的可迭代对象，再调用toArray()就能转换成Angular的*ngFor可以直接遍历的数组。

组件代码： #

import { Component } from '@angular/core';
import { Map } from 'immutable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  numberMap: Map<string, number>;
  numberMapEntries: [string, number][];

  constructor() {
    this.numberMap = Map({ first: 1, second: 2, third: 3, big: 100000 });
    // 转换为键值对数组
    this.numberMapEntries = this.numberMap.entries().toArray();
  }
}

模板代码： #

你可以用ES6的数组解构语法直接获取键和值：

<div *ngFor="let [key, value] of numberMapEntries">
  键：{{ key }}，值：{{ value }}
</div>

或者也可以通过索引访问（n[0]是键，n[1]是值）：

<div *ngFor="let n of numberMapEntries">
  键：{{ n[0] }}，值：{{ n[1] }}
</div>

方法2：自定义Angular管道（模板直接处理） #

如果不想每次都在组件里手动转换，可以自定义一个管道，让模板直接处理Immutable Map，这样复用性更强。

管道代码： #

import { Pipe, PipeTransform } from '@angular/core';
import { Map } from 'immutable';

@Pipe({
  name: 'immutableMapEntries'
})
export class ImmutableMapEntriesPipe implements PipeTransform {
  transform(map: Map<any, any>): [any, any][] {
    // 空值处理，避免报错
    return map ? map.entries().toArray() : [];
  }
}

记得在你的模块里声明这个管道哦！

模板代码： #

直接在*ngFor里使用管道：

<div *ngFor="let [key, value] of numberMap | immutableMapEntries">
  键：{{ key }}，值：{{ value }}
</div>

补充：关于Immutable Map的forEach方法 #

你提到forEach仅遍历值，其实它的第二个参数就是键哦！用法是这样的：

this.numberMap.forEach((value, key) => {
  console.log(`键：${key}，值：${value}`);
});

第一个参数是值，第二个是键，第三个参数还能拿到Map本身，以后可以留意下~

内容的提问来源于stack exchange，提问作者Jarek