Iterating over a Typescript Map with Array as value on HTML-CodePudding

community I've been working on a project, and I have faced a doubt about how to iterate over a Typescript Map that has a key value pair which the value is an Array. So, the objective is to iterate first on map elements and then inside iterate between values.

So, let's begin with the code I have archived and maybe this can help all the community. Supposing all the variables are filled.

Framework: IONIC Angular

TYPESCRIPT:

{
    numbersMap: Map<number, number[]> = new Map<number, number[]>();
}

HTML:

{
        <ion-list *ngFor="let numberMap of numbersMap | keyvalue">
           <ion-item *ngFor="the for we need to know to iterate key map">
               {{ key.number }}
           </ion-item>
        </ion-list>
}

Somebody knows what to put in the uncompleted for? Thanks, you community!

UPDATE:

HTML:

{
        <ion-list *ngFor="let numberMap of numbersMap | keyvalue">
           <ion-item *ngFor="let number of numberMap.value">
               {{ number.number }}
           </ion-item>
        </ion-list>
}

CodePudding user response：

this is best way to loop in angular

<ng-container *ngFor="let item of numbersMap"> strong text

hope it work for you

CodePudding user response：

So in TS the most basic way to iterate over a map is to use foreach. In your case we also can do this bit of POC to verify we are getting our values as we should.

numbersMap.forEach((value: number[], key: number) => {
    console.log("Key: ", key, " Value: ", value);
    value.forEach(x => {
      console.log("Inner Individual Values of Key: ", key, " Are: ", x);
    })
    console.log("----------\n")
  })

Thus if we extend this basic knowledge over to our angular template we can do the following:

<div *ngFor="let item of numbersMap | keyvalue">
  <p>Outer Loop Item: {{ item.key }}</p>
  <div *ngFor="let values of item.value">
    <p>Inner Loop Value: {{ values }}</p>
  </div>
  <br />
</div>

Your mistake is that you did number.number. Your .value is already an array of numbers, so each individual number is just a number.