Utilizing a Map with Angular's ngFor

Question

Utilizing a Map with Angular's ngFor

Currently, I am working with Ionic 3, which utilizes Angular and TypeScript.

My goal is to use ngFor with a Map type in my project.

Below is what I have implemented so far:

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

Here is the HTML code related to this:

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

However, I encountered the following error message:

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

Is there a way to bind my map even if it's not iterable?

How should I proceed in this situation?

angular typescript ngfor iterable

Answer 1

Answer №1

<div *ngFor="let element of elements | keyValue">
{{element.key}}...{{element.value}}
</div>

Answer 2

<div *ngFor="let element of elements | keyValue">
{{element.key}}...{{element.value}}
</div>

Answer 3

Answer №2

When you only require the values, you can simply iterate over them

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 keys and values, you can convert the Map into an iterable 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());
}

Answer 4

When you only require the values, you can simply iterate over them

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 keys and values, you can convert the Map into an iterable 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());
}

Utilizing a Map with Angular's ngFor

Answer №1

Answer №2

Similar questions

What is the process for including a resource parameter in the acquireTokenSilent method of an MSAL instance within an Angular application?

Establish a Svelte and TypeScript "observe" script for developing vscode extensions

What is preventing me from retrieving a value from a member function or method within a TypeScript class instance?

Repeated calls to Angular's <img [src]="getImg()"> frequently occur

Retrieving child elements from parent identifiers using Typescript

Disabling end date options in an Angular Material date range picker based on the selected start date

What is the best way to retrieve the most recent entry in a Firebase real-time database?

Retrieve information from two distinct observables from within the resolver function

Dealing with asynchronous data in ngOnInit in Angular 4 when routing with parameters: tips and tricks

Navigating through a JSON dictionary in Svelte: A step-by-step guide

Looking to implement nested routes in Angular to ensure that each component's view updates properly

Child class in TypeScript lacking type information for abstract property

Why is it that the angular app is able to access the server, but the web API is unable to be accessed when called from an external system? It seems to work

What is the process for integrating mobiscroll into an Angular project using a customized username?

The successful operation of 'Ionic serve --lab' may involve the need to manually save the app.module

The click listener triggers a single time when a render method is nested within it

Mapping type property names in Typescript for substitution

Limit file upload size to less than 1MB in Angular 2 with typescript using ng2-file-upload

Guide to Setting Up "Remember Me" Login for Users in Angular

The Java AWS Lambda function is returning an empty JSON response in the body