First of all - I know there's a lot of posts about this exception. And I've been reading about the change detection mechanism - and I kinda understands, what my problem is. I just don't how to solve it.

My page is rendered with a table with a checkbox for each row. The user can check any number and choose to delete these rows. The selected row ids are binded to a Map in the component. In a modal confirmation window all selected rows are shown and grouped by common identifiers (some rows has the same groupId).

The table in the modal windows is rendered using a method calculating a map of common identifies with a list of rows with that common identifier:

getGroupedReportsMarkedForDeletion():Map<string, ReportRowEntryModel[]> {
    let groupedReports: Map<string, ReportRowEntryModel[]> = new Map();
    this.allReports.forEach(report => {
        if(this.selectedReportsForDeletion.get( {
            if(groupedReports.has(report.groupId())) {
            } else  {
                groupedReports.set(report.groupId(), [report]);
    return groupedReports;

Which obviously is empty the during the inital render. When ever I check a row ExpressionChangedAfterItHasBeenCheckedError is thrown with reference to the line containing the *ngFor iterating over the "groupedReports":

<div id="selectedReportsGroup_{{group}}" *ngFor="let group of getGroupedReportsMarkedForDeletion()?.keys()">

How can I solve this? Any advise appreciated :)

Angular: ^5.0.2
AngularCli: 1.5.3

So I have narrowed it down a bit further. By extracting the ".keys()" from the html to a component method returning a list rather than an iterable the error is gone.. Though i'm unaware why. The *ngFor instead looks like: *ngFor="let key of getGroupedReportsMarkedForDeletionKeys()" – Hoof
if it's a component method, *ngFor="let key of keys()", Not exist anything like keys() in the function getGroupedReportsMarkedForDeletion() – Eliseo

0 Answers 11

Not the answer you're looking for? Browse other questions tagged or ask your own question.