Error using reverse (ExpressionChangedAfterItHasBeenCheckedError)

[erperejildo]

<ion-card *ngFor="let team of gameProvider.game.teams | orderBy: 'team.points':true; let i = index">

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'Team 2'. Current value: 'Team 1'.

These values are in team.title. The content inside the html is empty, I'm not displaying anything yet

[VadimDez]

Could you show how gameProvider.game.teams looks like?

[erperejildo]

[VadimDez]

First of all doing orderBy: 'team.points' won't work anyways, try:

<div *ngFor="let team of gameProvider.game.teams | orderBy: 'points': true">
  {{ team | json }}
</div>

[erperejildo]

I also tried that but same error.

Using Angular 5 with Ionic 3 if that matters

[erperejildo]

@VadimDez any update on this?

This might help: https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

I also tried it out with a different model and it works (?)

[erperejildo]

Solved using this way:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef) {
  }

ngAfterViewInit() {
    this.teams = this.gameProvider.game.teams;
    this.cdRef.detectChanges();
  }

<ion-card *ngFor="let team of teams | orderBy: 'points':true; let i = index">