Angular ngFor using a Map

Question

I'm using ionic 3, thus angular and typescript.

What I'm trying to achieve is to use the ngFor with a Map type.

Here is what I have:

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

And now from the html side I have:

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

Now this gives me the following error:

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

Now is there any possibile way I cant bind my map even if it is not iterable?

What should I do?

Wallin

Answer 1

if you only need the values, you can iterate over those

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

if you need both values, you can convert the Map to an iterateable object containing arrays with the key at index 0 and value at index 1 using the entries-function:

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

Anorthosite

I would need also the id, anyhow leaving aside the id. I get the following error: Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngForOf: [object Map Iterator]'. Current value: 'ngForOf: [object Map Iterator]'. I guess this is because I modify the values inside the Map after the html is displayed, but I would expect it to be binded like ususal thus update the value – Wallin

@ZenoTrevisan you are right. Angular seems to handle Iterateables differently from Arrays. I edited my answer so it won't throw this error – Anorthosite

seems like this will be fixed in a future release. See github.com/angular/angular/issues/17725 – Anorthosite

Answer 2

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

Icken

Generally, answers are much more helpful if they include an explanation of what the code or commands are intended to do, and why that solves the problem. – Antecedence

No need to explain - the most correct way is here. – Raptorial

Agree with @geertjanvdk. +1 for useful answer, -1 for code only answer: result = no vote either way. Simple link to angular.io/api/common/KeyValuePipe would have been enough. – Blasto