Expression has changed after it was checked during iteration by map keys in angular 2

Issue

I don't understand why I get error. My map is not changed .

Expression has changed after it was checked. Previous value: '[object Map Iterator]'. Current value: '[object Map Iterator]'

<tr *ngFor="let author of bindedAuthors.keys()">
  <td> {{author}}</td>
  <td>
    <button (click)="onUpdate(author)"
            class="btn gl-btn-primary">Update
    </button>
  </td>
  <td>
    <button (click)="onDelete(author)" class="btn gl-btn-default">Delete</button>
  </td>
</tr>

The result is expected, all data is shown but this error is flooding the console every time.

Solution

Don't bind to a method ...keys() in the template. It will be called every time change detection runs. object.keys() returns a new object every time it is called and Angular recognizes this as an unexpected change, which leads to your error.

You can fix it like

someMethod() {
  this.bindedAuthorsKeys = this.bindedAuthors.keys();
}

*ngFor="let author of bindedAuthorsKeys"

Update from the comments:

this.bindedAuthorsKeys = Array.from(this.bindedAuthors.keys());

It looks like .keys() returns the same instance every call, so Angular doesn't recognize the change. Creating a new array every time ensures that the array is a completely new object and therefore Angular recognizes the change and marks the widget dirty and doesn't complain that the state "changed behind its back".

Answered By - Günter Zöchbauer