迭代Map angular4内部的对象列表

Question

export class Person{
name:string,
age:number,
listAdress:Map<string,Adresses[]>

}

I need to parse all adresses of each person

    <div *ngFor="let person of persons">
<div *ngFor="let adr of person.listAdress">==> it is possible ??
</div>

how can I iterate all adresses with key of Map

if we suppose that the key of Map is 'Fes'

Answer 1

The Map API exposes a values() method which you can use to get the Address[] .

The data structure is a bit confusing, but I'll show you how you can get the first array of Address from the person and iterate over that with *ngFor . ( *ngFor requires an Array-like structure, not just any iterable).

Create a method in your component class to convert the values iterable into an array:

In component class:

getAddresses(person: Person): Address[] {
  return Array.from(person.listAddress.values())[0];
}

In template:

<div *ngFor="let person of persons">
  <div *ngFor="let adr of getAddresses(person)"></div>
</div>

You can also use the forEach() method to iterate over each value and add it to another array (again in a separate method):

In component class:

getAllAddresses(person: Person): Address[] {
  const allAddresses: Address[] = [];
  person.listAddress.forEach((value: Address[]) => {
    allAddresses.push(...value);
  });
  return allAddresses;
}

In template:

<ul> All Addresses: 
  <li *ngFor="let adr of getAllAddresses(person)">
    {{ adr.num + ' ' + adr.street }}
  </li>
</ul>

Here is a link to a working app with both examples: https://stackblitz.com/edit/address-map

Answer 2

You cannot loop on a Map with ngFOr as it's not considered as Iterable .

To do that, you might first apply a transformation thanks to Array.from or manually looping on them as pointed out by @vincecampanale BUT it'll hurt your your performances as it'll be triggered and run on every change detection.

If it's a small app, fine. If you care about perfs, you should rather use a (pure!) pipe to apply the transformation to the Map + trackBy on the ngFor .

For the pipe, no need to do it yourself, you can use ngx-pipes and do

<div *ngFor="let person of persons">
  <div *ngFor="let adr of person.listAdress | values"></div>
</div>

It be better for perfs and avoid coding something that does not exists. Also add a trackBy and it'll be excellent :)