带有Promise的ngOnInit上的ExpressionChangedAfterItHasBeenCheckedError

Question

I'm trying to achieve something pretty simple:
Display data given by a service in my component.

So here is what I have that used to work:

In my component:

...

dataSet: String[];

ngOnInit(){
  this._service.getDataId().then(data => this.dataSet = data);
}

...

In my service:

...

getDataId(){
  return this.http.get(adress).toPromise()
    .then(response => response.json() as String[])
    .catch(this.handleError);
} // return a Promise<String[]>

...

In the view:

... 

<ul>
  <li *ngFor="let data of dataset">
    {{ data['id'] }}
  </li>
</ul>

...

But now , I've changed the service function to get more data.
I get an ExpressionChangedAfterItHasBeenCheckedError since then.
Here is the change in the service:

...

getMoreData() {
  const result: Map<string, String[]> = new Map();
  return this.http.get(this.adress).toPromise()
    .then((response) => {
      return Promise.all(Array.from(response.json())
      .map(id => {
        return this.http.get(this.adress + '/' + id').toPromise()
        .then((rep) => {
          result.set(domain['@href'], rep.json() as String[]);
        }).catch(this.handleError)
      })
    );
  })
  .then(() => result)
  .catch(this.handleError);
} // return a Promise<Map<string, String[]>>

...

This raise an error even if the data is correctly displayed.
I've tried a few workaround (setTimeout, ChangeDetectorRef) but I don't even know why this was working and is not anymore since both functions are returning a Promise<Stuff> .

I'm also aware that I need to initialize my attribute like this in the component to avoid the null error when the view is loading:

this.moreData: Map<string, String[]> = new Map();

And this might also cause my issue, but how am I supposed to do then ?

---
Project using
Angular 4.2.2
Typescript 2.3.4

Answer 1

In fact, this is related with this issue: https://github.com/angular/angular/issues/17725

The Map<> structure is here the problem since it creates a new Iterator every time when you use it in your view (ex: when using .entries)

A workaround can be found in the link above.