ngFor map object

Question

I have some difficulties to understand how the ngFor works with map.

So this is my HTML code:

<div *ngFor="let country of wars.getCountrys()">

and here my TypeScript code:

wars: Map < number, Array < country> > = new Map < number, Array < country > > ();

getCountrys() {
    console.log('getCountrys()');
    return Array.from(this.wars.keys());
}

Everything is working good, however in the console I have 2 getCountrys() I don't understand why the function getCountrys() is called 2 times.

[relevant](https://stackoverflow.com/questions/48187362/how-to-iterate-using-ngfor-loop-map-containing-key-as-string-and-values-as-map-i) — Vanity Slug - codidact.com, Jul 25 '18 at 15:40
This may have to do with Angular's dev mode additional change detection check. Is it logged twice in production mode? — Explosion Pills, Jul 25 '18 at 15:46

score 1 · Answer 1 · answered Jul 25 '18 at 16:04

1

Don't use the function to generate the array. Create it inside the constructor as a variable.

In constructor:

this.countries = Array.from(this.wars.keys());

In html:

<div *ngFor="let country of countries">

answered Jul 25 '18 at 16:04

Lasithe

1,916
1
15
20

score 0 · Accepted Answer · answered Jul 25 '18 at 15:52

0

in Angular, there is something called ChangeDetection its basically to detect when component data changes, and then automatically re-render the view to reflect that change.

in the Development mode in the angular application there is an additional cycle of detection is done, which means now we have two detection cycles.

these two cycles results executing your method twice.

answered Jul 25 '18 at 15:52

Raed Khalaf

1,997
2
13
29

could you provide a link to documentation on this? – BlackICE Jul 25 '18 at 16:40
1

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html – Raed Khalaf Jul 25 '18 at 17:11

ngFor map object

2 Answers2