Angular ngFor 使用地图

Question

我使用的是 ionic 3，因此 angular 和 typescript。

我想要实现的是将 ngFor 与 Map 类型一起使用。

这是我的资料：

interface IShared_Position {
lat: number;
lng: number;
time: number;
color?: string;
}
public shared_position = new Map<string, IShared_Position>();

现在 html 方面我有：

    <ion-list>
  <ion-item ion-item *ngFor="let item of shared_position">
    <h2>{{ item.time }}</h2>
  </ion-item>

现在出现以下错误：

Error: Cannot find a differ supporting object '[object Map]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

现在有什么方法可以绑定我的地图，即使它不可迭代吗？

我该怎么办？

Answer 1

如果您只需要这些值，您可以迭代这些值

html:

<ion-item ion-item *ngFor="let item of getValues()">
    <h2>{{ item.time }}</h2>
</ion-item>

ts:

getValues(): Array<IShared_Position> {
    return Array.from(this.shared_position.values());
}

如果您需要这两个值，您可以使用 entries-函数将 Map 转换为包含数组的可迭代对象，其中键位于索引 0，值位于索引 1：

html:

<ion-item ion-item *ngFor="let item of getEntries()">
    <h2>key: {{ item[0] }} - time: {{item[1].time}}</h2>
</ion-item>

ts:

getEntries(): [string, IShared_Position] {
    return Array.from(this.shared_position.entries());
}

Answer 2

<div *ngFor="let item of items | keyvalue">
{{item.key}}......{{item.value}}
</div>

Angular ngFor using a Map