Angular ng使用地图

Question

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

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

这就是我所拥有的：

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>

现在这给了我以下错误：

  

错误：无法找到不同的支持对象＆＃39; [对象地图]＆＃39;类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如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>