Ionic3中Angular ngFor遍历Map类型报错问题咨询

我太懂你遇到的这个问题了——Angular的*ngFor指令压根不支持直接遍历原生的Map对象，这就是你在<ion-list>里用*ngFor="let item of shared_position"会报错的核心原因。别慌，给你两个简单可行的解决思路：

方法1：将Map转为键值对数组（保留键和值） #

在你的组件类里添加一个getter，把Map转换成包含键值对的数组：

// 示例IShared_Position接口（可根据你的实际定义调整）
interface IShared_Position {
  lat: number;
  lng: number;
  // 其他自定义属性...
}

export class YourPageComponent {
  public shared_position = new Map<string, IShared_Position>();

  // 添加getter转换Map为可遍历数组
  get sharedPositionEntries(): [string, IShared_Position][] {
    // 将Map的entries迭代器转为数组，每个元素是[key, value]形式的数组
    return Array.from(this.shared_position.entries());
  }
}

然后在HTML模板里就可以正常遍历了：

<ion-list>
  <ion-item *ngFor="let entry of sharedPositionEntries">
    <p>标识键：{{ entry[0] }}</p>
    <p>位置信息：纬度{{ entry[1].lat }}，经度{{ entry[1].lng }}</p>
  </ion-item>
</ion-list>

方法2：只遍历Map的值（或键） #

如果你只需要遍历Map里的值，不需要键，可以用values()方法转换：

get sharedPositionValues(): IShared_Position[] {
  return Array.from(this.shared_position.values());
}

模板里这样用：

<ion-list>
  <ion-item *ngFor="let position of sharedPositionValues">
    <p>位置信息：纬度{{ position.lat }}，经度{{ position.lng }}</p>
  </ion-item>
</ion-list>

同理，要是只需要键，就用this.shared_position.keys()来转换。

小提示 #

别直接在模板里写Array.from(shared_position.entries())，因为Angular的变更检测会每次都重新执行这个转换，可能影响页面性能。用组件里的getter或者提前把转换后的数组存成一个属性，是更优的做法。

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