ExpressionChangedAfterItHasBeenCheckedError: by iterating a map

user_3834036 0
Viewed 606

I have a simple Angular component, that on rendering throw the following error:

MyComponent.html:10 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Previous value: 'ngForOf: [object Map Iterator]'. 
Current value: 'ngForOf: [object Map Iterator]'.

The error is thrown twice, even when moved to a bare-minimum Angular project with no other code (just an AppComponent wrapping this component).

I minimized the code to the most minimal form that still reproduces the problem. I replaced the data service with a hardcoded observable.

Component

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
})
export class MyComponent implements OnInit, OnDestroy {

  private cobs: Map<number, string>;
  private cobSub: Subscription;

  constructor() {}

  ngOnInit() {
    // originally data comes from a service...
    this.cobSub = of(new Map<number, string>([[1, 'a'], [2, 'b']]))
      .subscribe({
        next: cobs => { this.cobs = cobs; },
      });
  }

  ngOnDestroy(): void {
    this.cobSub.unsubscribe();
  }

}

Note that asyncPipe is more common for use in this sort of scenario - but I cannot use it.

Template

<div>
  <table *ngIf="cobs">
    <tr>
      <th>Id</th>
      <th>Class of Business</th>
    </tr>
    <tr *ngFor="let key of cobs.keys()">
      <td>{{key}}</td>
      <td>{{cobs.get(key)}}</td>
    </tr>
  </table>
</div>

Why is the problem happening?

How it can be fixed?

rxjs angular
1 Answers

It's problem with the way you iterating on a Map, you can try:

export class AppComponent implements OnInit {
  private cobs = new Map<number, string>();
  private cobSub: Subscription;

  constructor() {}

  ngOnInit() {
    this.cobSub = of(new Map<number, string>([[1, 'a'], [2, 'b']]))
      .subscribe( cobs => {
        this.cobs = cobs;
      });
  }

  getKeys(map){
    return Array.from(map.keys()); // add it
  }
  ngOnDestroy(): void {
    this.cobSub.unsubscribe();
  }
}

in html:

<div>
  <table *ngIf="cobs">
    <tr>
      <th>Id</th>
      <th>Class of Business</th>
    </tr>
    <tr *ngFor="let key of getKeys(cobs)">
      <td>{{key}}</td>
      <td>{{cobs.get(key)}}</td>
    </tr>
  </table>
</div>

demo

and if You are using Angular 6.1+ , you can use default pipe keyvalue :

<tr *ngFor="let key of cobs | keyvalue">
          <td>{{key.key}}</td>
          <td>{{key.value}}</td>
        </tr>
user_89903670
Related