Angular ngFor使用地图

Question

我使用的是离子3，因此是角度和打字稿。

我想要实现的是将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>

现在，这给了我以下错误：

错误：找不到类型为“对象”的其他支持对象“ [对象图]”。NgFor仅支持绑定到Iterables，例如数组。

现在有什么可能的方法，即使它不是可迭代的，我也无法绑定我的地图？

我该怎么办？

Answer 1

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

Answer 2

如果只需要这些值，则可以遍历这些值

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

如果需要两个值，则可以使用-function将Map转换为包含数组的可迭代对象，该数组的键为索引0，值为1 entries。

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